ImageGear for .NET
Toolbar
| ImageGear for .NET User Guide > Using ImageGear for .NET > Using ImageGear.Windows.Controls Namespace > Toolbar |
The PageView MouseTool property can be set to specify the current mouse tool. The mouse tool settings can be accessed through the MouseToolSettings property.
The following topics are discussed in this section:
The ImGearPageViewToolbar control is a PageView toolbar containing the default tools. It can be bound to a PageView control using the following XAML:
| XAML Example |
Copy Code |
|---|---|
<igwc:ImGearPageViewToolbar x:Name="igToolBar" MouseTool="{Binding ElementName=imGearPageView, Path=MouseTool, Mode=TwoWay}" /> | |
The toolbar contains the following default tools:
You can customize the toolbar and specify the tools it contains, the order of the tools, the images, the tool tips, etc., by setting its ItemsSource to a collection of ImGearPageViewTools, as shown in the code below. This is also demonstrated in the ART sample which has an additional toolbar item for creating a custom mark.
The toolbar in the example code below contains four items: Select Mark, Create Rectangle Mark, Create Sector Mark, and Hand Pan. The MouseTool property of each ImGearPageViewTool is set to the PageView MouseTool enum member that the bound PageView MouseTool should be set to when the toolbar item is selected. You can specify Custom if you want the selection of an item to have no effect on the bound PageView MouseTool (for example, if you are using the SelectionChanged event to handle the selection of a toolbar item).
The Image property in the code below uses the ImGearImageConverter class to load the image for a toolbar item from a FrameworkElement. These elements are specified in App.xaml, shown further below. The Hand Pan toolbar item in the XAML below provides an example of setting the Image to an image file resource (hand.png) in the project (instead of using an image converter).
The Create Sector Mark toolbar item specified in the XAML below uses custom mark functionality, which is demonstrated in the ART sample. The CustomMarkController property of ImGearPageViewTool must be set to the string that is passed to the ImGearAnnotatorMarkController RegisterCustomController method used to register the custom mark. In the XAML below, the SelectedCustomMarkController property of an ImGearPageViewToolbar control is bound to the CustomMarkController property of a PageView control so that the PageView’s custom mark controller is set to the sector mark controller when the Create Sector Mark toolbar item is selected.
| XAML Example |
Copy Code |
|---|---|
<Window.Resources>
<igwc:ImGearImageConverter x:Key="imageConverter" />
</Window.Resources>
…
<igwc:ImGearPageViewToolbar x:Name="igToolBar" MouseTool="{Binding ElementName=imGearPageView, Path=MouseTool, Mode=TwoWay}" SelectedCustomMarkController="{Binding ElementName=imGearPageView, Path=CustomMarkController, Mode=TwoWay}" >
<igwc:ImGearPageViewToolbar.ItemsSource>
<igwc:ImGearPageViewToolCollection>
<igwc:ImGearPageViewTool MouseTool="SelectMark" ToolTip="Select Mark" Image="{Binding RelativeSource={RelativeSource Self}, Path=MouseTool, Converter={StaticResource imageConverter}, ConverterParameter={StaticResource ResourceKey=SelectMark}}" />
<igwc:ImGearPageViewTool MouseTool="CreateRectangleMark" ToolTip="Create Rectangle Mark" Image="{Binding RelativeSource={RelativeSource Self}, Path=MouseTool, Converter={StaticResource imageConverter}, ConverterParameter={StaticResource ResourceKey=CreateRectangleMark}}" />
<igwc:ImGearPageViewTool MouseTool="CreateCustomMark" ToolTip="Create Sector Mark" Image="{Binding RelativeSource={RelativeSource Self}, Path=MouseTool, Converter={StaticResource imageConverter}, ConverterParameter={StaticResource ResourceKey=CreateSectorMark}}" CustomMarkController="SectorMark" />
<igwc:ImGearPageViewTool MouseTool="HandPan" ToolTip="Hand Pan" Image="hand.png" />
</igwc:ImGearPageViewToolCollection>
</igwc:ImGearPageViewToolbar.ItemsSource>
</igwc:ImGearPageViewToolbar> | |
The following application resources are specified in App.xaml, as demonstrated in the ART sample:
| XAML Example |
Copy Code |
|---|---|
<Application.Resources>
<Canvas x:Key="SelectMark" Width="30" Height="30">
<Rectangle Margin="13,16,5,6" Width="11" Height="7" StrokeThickness="1.5" Fill="Red" Stroke="Black" Opacity="0.7">
</Rectangle>
<Ellipse Margin="7,7,4,6" Width="12" Height="8" StrokeThickness="1.5" Fill="Yellow" Stroke="Black" Opacity="0.7">
</Ellipse>
<Rectangle Margin="4" Width="22" Height="22" StrokeThickness="1.5" StrokeDashArray="2,2" Stroke="DarkGray" >
</Rectangle>
</Canvas>
<Canvas x:Key="CreateTextMark" Width="30" Height="30">
<Rectangle Margin="4" Width="22" Height="22" StrokeThickness="0" Fill="Yellow">
</Rectangle>
<TextBlock Margin="6, 6" FontSize="14">ab</TextBlock>
<Rectangle Margin="24,6,0,0" Width="2" Height="20" Fill="Black"/>
</Canvas>
<Canvas x:Key="CreateLineMark" Width="30" Height="30">
<Line X1="4" Y1="5" X2="26" Y2="27" Stroke="DarkMagenta"></Line>
<Line X1="4" Y1="4" X2="26" Y2="26" Stroke="Magenta"></Line>
</Canvas>
<Canvas x:Key="CreateFreehandMark" Width="30" Height="30">
<Path Stroke="SeaGreen" StrokeThickness="1.5">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<!-- The StartPoint specifies the starting point of the first curve. -->
<PathFigure StartPoint="4,4">
<PathFigure.Segments>
<PathSegmentCollection>
<PolyBezierSegment Points="29,4 -5,27 26,26" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
<Canvas x:Key="CreatePointMark" Width="30" Height="30">
<Ellipse Margin="12,13,4,6" Width="5" Height="5" StrokeThickness="1.5" Fill="#FF800000" Stroke="#FF800000" Opacity="0.7">
</Ellipse>
</Canvas>
<Canvas x:Key="CreateCurveMark" Width="30" Height="30">
<Path Stroke="#FF00FFFF" StrokeThickness="1.5">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="4,26">
<PathFigure.Segments>
<PathSegmentCollection>
<PolyBezierSegment Points="8,8 22,22 26,4" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
<Canvas x:Key="CreateRectangleMark" Width="30" Height="30">
<Rectangle Margin="4,6,4,6" Width="22" Height="18" StrokeThickness="1.5" Fill="Red" Stroke="Black" Opacity="0.7">
</Rectangle>
</Canvas>
<Canvas x:Key="CreateEllipseMark" Width="30" Height="30">
<Ellipse Margin="4,6,4,6" Width="22" Height="18" StrokeThickness="1.5" Fill="Yellow" Stroke="Black" Opacity="0.7">
</Ellipse>
</Canvas>
<Canvas x:Key="CreatePolygonMark" Width="30" Height="30">
<Polygon StrokeThickness="1.5" Fill="Blue" Stroke="Black" Opacity="0.7" Points="8,9 20,6 26,20 6,24" >
</Polygon>
</Canvas>
<Canvas x:Key="CreatePolylineMark" Width="30" Height="30">
<Polyline StrokeThickness="1.5" Stroke="Green" Opacity="1" Points="10,4 5,23 25,20 12,15" >
</Polyline>
</Canvas>
<Canvas x:Key="CreateImageMark" Width="30" Height="30">
<Image Source="image.png" Margin="4,6,4,6" Width="22"/>
</Canvas>
<Canvas x:Key="CreateRulerMark" Width="30" Height="30">
<Rectangle Margin="2, 10" Width="26" Height="12" StrokeThickness="1" Fill="LightGoldenrodYellow" Stroke="Black"/>
<Line X1="5.5" Y1="21" X2="5.5" Y2="18" Stroke="Black"></Line>
<Line X1="8.5" Y1="21" X2="8.5" Y2="18" Stroke="Black"></Line>
<Line X1="11.5" Y1="21" X2="11.5" Y2="16" Stroke="Black"></Line>
<Line X1="14.5" Y1="21" X2="14.5" Y2="18" Stroke="Black"></Line>
<Line X1="17.5" Y1="21" X2="17.5" Y2="18" Stroke="Black"></Line>
<Line X1="20.5" Y1="21" X2="20.5" Y2="18" Stroke="Black"></Line>
<Line X1="23.5" Y1="21" X2="23.5" Y2="16" Stroke="Black"></Line>
<Line X1="26.5" Y1="21" X2="26.5" Y2="18" Stroke="Black"></Line>
</Canvas>
<Canvas x:Key="CreatePolyRulerMark" Width="30" Height="30">
<Rectangle Margin="6.5, 7.5" StrokeThickness="0.5" Fill="LightGoldenrodYellow" Stroke="Black" Width="22" Height="7"/>
<Rectangle StrokeThickness="0.5" Fill="LightGoldenrodYellow" Stroke="Black" Margin="10.5, 6.5" Width="22" Height="7">
<Rectangle.RenderTransform>
<RotateTransform CenterX="0" CenterY="0" Angle="45" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle StrokeThickness="0.5" Fill="LightGoldenrodYellow" Stroke="Black" Margin="2.5, 18.5" Width="22" Height="7"/>
<Ellipse Stroke="DarkGray" Width="2" Height="2" Margin="9.5, 10.5"></Ellipse>
<Ellipse Stroke="DarkGray" Width="2" Height="2" Margin="20.5, 21.5"></Ellipse>
</Canvas>
<Canvas x:Key="CreateProtractorMark" Width="30" Height="30">
<Canvas.Clip>
<RectangleGeometry Rect="6,0,30,25"></RectangleGeometry>
</Canvas.Clip>
<Line X1="7" Y1="24" X2="7" Y2="6" Stroke="DarkRed" StrokeThickness="2"></Line>
<Line X1="7" Y1="24" X2="25" Y2="24" Stroke="DarkRed" StrokeThickness="2"></Line>
<Ellipse Width="18" Height="18" Stroke="DarkRed" Canvas.Left="-1" Canvas.Top="13"></Ellipse>
</Canvas>
<Canvas x:Key="CreateSectorMark" Width="30" Height="30">
<Path Stroke="Black" StrokeThickness="1.5" Fill="Orange">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="15 15" IsClosed="True">
<LineSegment Point="25 15"/>
<ArcSegment Size="10 10" Point="15 5" SweepDirection="ClockWise" IsLargeArc="True" />
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
<Canvas x:Key="Select" Width="30" Height="30">
<Rectangle Margin="4" Width="22" Height="22" StrokeThickness="1.5" StrokeDashArray="2,2" Stroke="DarkGray" >
</Rectangle>
</Canvas>
<Canvas x:Key="Magnifier" Width="30" Height="30">
<Image Source="magnify.png" Margin="4,6,4,6" Width="22"/>
</Canvas>
<Canvas x:Key="RectangleZoom" Width="30" Height="30">
<Rectangle Margin="4" Width="22" Height="22" StrokeThickness="1.5" StrokeDashArray="2,2" Stroke="DarkGray" >
</Rectangle>
<Image Source="zoom.png" Margin="4,6,4,6" Width="22"/>
</Canvas>
<Canvas x:Key="HandPan" Width="30" Height="30">
<Image Source="hand.png" Margin="4,6,4,6" Width="22"/>
</Canvas>
<Canvas x:Key="None" Width="30" Height="30">
<Image Source="arrow.png" Margin="4,6,4,6" Width="22"/>
</Canvas>
<Canvas x:Key="ZoomIn" Width="30" Height="30">
<Image Source="zoomin.png" Margin="4,6,4,6" Width="22"/>
</Canvas>
<Canvas x:Key="ZoomOut" Width="30" Height="30">
<Image Source="zoomout.png" Margin="4,6,4,6" Width="22"/>
</Canvas>
</Application.Resources> | |