Search
Default Control Templates of Diagram Items

Below you can find the XAML for the default control templates defined by Diagramming for WinUI. You could copy the code of a template and insert some additional elements when you need to build upon the predefined appearance of items.

XAML  Copy Code

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MindFusion.Diagramming"
xmlns:lanes="using:MindFusion.Diagramming.Lanes">

<local:DashArrayConverter x:Key="dashArrayConverter" />
<local:StrokeConverter x:Key="strokeConverter" />
<local:TextWrappingConverter x:Key="textWrappingConverter" />
<local:ThicknessConverter x:Key="thicknessConverter" />
<local:MillimeterConverter x:Key="millimeterConverter" />
<local:VisibilityConverter x:Key="visibilityConverter" />

<Style TargetType="local:Diagram">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="local:Diagram">
    <Canvas Background="{TemplateBinding Background}">
     <Canvas x:Name="laneGridCellContainer" Visibility="{Binding EnableLanes, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource visibilityConverter}}" Canvas.ZIndex="0" />
     <Canvas x:Name="laneGridColumnHeaderContainer" Visibility="{Binding EnableLanes, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource visibilityConverter}}" Canvas.ZIndex="1" />
     <Canvas x:Name="laneGridRowHeaderContainer" Visibility="{Binding EnableLanes, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource visibilityConverter}}" Canvas.ZIndex="1" />
     <ContentPresenter Canvas.ZIndex="2" />
     <Canvas x:Name="foregroundLayer" Canvas.ZIndex="3" />
    </Canvas>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

<Style TargetType="lanes:FourSidedBorder">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="lanes:FourSidedBorder">
    <Border
     BorderBrush="{Binding BorderStyle.LeftBorderPen.Brush, RelativeSource={RelativeSource TemplatedParent}}"
     BorderThickness="{Binding BorderStyle.LeftBorderPen.Thickness, Converter={StaticResource thicknessConverter}, ConverterParameter=Left, RelativeSource={RelativeSource TemplatedParent}}">
     <Border
      BorderBrush="{Binding BorderStyle.TopBorderPen.Brush, RelativeSource={RelativeSource TemplatedParent}}"
      BorderThickness="{Binding BorderStyle.TopBorderPen.Thickness, Converter={StaticResource thicknessConverter}, ConverterParameter=Top, RelativeSource={RelativeSource TemplatedParent}}">
      <Border
       BorderBrush="{Binding BorderStyle.RightBorderPen.Brush, RelativeSource={RelativeSource TemplatedParent}}"
       BorderThickness="{Binding BorderStyle.RightBorderPen.Thickness, Converter={StaticResource thicknessConverter}, ConverterParameter=Right, RelativeSource={RelativeSource TemplatedParent}}">
       <Border
        BorderBrush="{Binding BorderStyle.BottomBorderPen.Brush, RelativeSource={RelativeSource TemplatedParent}}"
        BorderThickness="{Binding BorderStyle.BottomBorderPen.Thickness, Converter={StaticResource thicknessConverter}, ConverterParameter=Bottom, RelativeSource={RelativeSource TemplatedParent}}">
        <Border
         Background="{Binding BorderStyle.BackgroundBrush, RelativeSource={RelativeSource TemplatedParent}}">
         <ContentPresenter />
        </Border>
       </Border>
      </Border>
     </Border>
    </Border>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

<Style TargetType="lanes:LaneGridHeaderPresenter">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="lanes:LaneGridHeaderPresenter">
    <lanes:FourSidedBorder BorderStyle="{Binding Style}">
     <TextBlock Text="{Binding Title}" />
    </lanes:FourSidedBorder>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

<Style TargetType="lanes:LaneGridCellPresenter">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="lanes:LaneGridCellPresenter">
    <lanes:FourSidedBorder BorderStyle="{Binding Style}" />
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

<Style TargetType="local:LinkLabel">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="local:LinkLabel">
    <Border Background="{TemplateBinding Background}">
     <TextBlock
      Text="{TemplateBinding Text}"
      Foreground="{TemplateBinding Foreground}"
      FontFamily="{TemplateBinding FontFamily}"
      FontSize="{TemplateBinding FontSize}"
      FontStretch="{TemplateBinding FontStretch}"
      FontStyle="{TemplateBinding FontStyle}"
      FontWeight="{TemplateBinding FontWeight}"
      TextWrapping="{Binding EnableWrap, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource textWrappingConverter}}"
      MaxWidth="{TemplateBinding MaxWidth}"
      MaxHeight="{TemplateBinding MaxHeight}"
      Margin="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource millimeterConverter}}" />
    </Border>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

<Style TargetType="local:ShapeNode">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="local:ShapeNode">
    <Canvas x:Name="Adorner">

     <Path x:Name="Shape"
      Data="{TemplateBinding ShapeGeometry}"
      Stroke="{TemplateBinding Stroke}"
      DataContext="{TemplateBinding StrokeDashArray}"
      StrokeDashArray="{Binding Converter={StaticResource dashArrayConverter}}"
      StrokeDashCap="{TemplateBinding StrokeDashCap}"
      StrokeDashOffset="{TemplateBinding StrokeDashOffset}"
      StrokeEndLineCap="{TemplateBinding StrokeEndLineCap}"
      StrokeLineJoin="{TemplateBinding StrokeLineJoin}"
      StrokeMiterLimit="{TemplateBinding StrokeMiterLimit}"
      StrokeStartLineCap="{TemplateBinding StrokeStartLineCap}"
      StrokeThickness="{TemplateBinding StrokeThickness}"
      Fill="{TemplateBinding Brush}"
      Visibility="{TemplateBinding ShapeVisibility}"
      Opacity="{TemplateBinding ShapeOpacity}" />

     <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
      <Image x:Name="Image"
       Source="{TemplateBinding Image}"
       HorizontalAlignment="{TemplateBinding HorizontalImageAlignment}"
       VerticalAlignment="{TemplateBinding VerticalImageAlignment}"
       Stretch="{TemplateBinding ImageStretch}">
      </Image>
     </Grid>

     <Grid
      Margin="{TemplateBinding TextMargin}"
      Width="{TemplateBinding TextWidth}"
      Height="{TemplateBinding TextHeight}"
      HorizontalAlignment="Left"
      VerticalAlignment="Top">

      <TextBlock
       Text="{TemplateBinding Text}"
       FontFamily="{TemplateBinding FontFamily}"
       FontSize="{TemplateBinding FontSize}"
       FontStretch="{TemplateBinding FontStretch}"
       FontStyle="{TemplateBinding FontStyle}"
       FontWeight="{TemplateBinding FontWeight}"
       HorizontalAlignment="{TemplateBinding HorizontalTextBlockAlignment}"
       VerticalAlignment="{TemplateBinding VerticalTextBlockAlignment}"
       TextAlignment="{TemplateBinding TextAlignment}"
       TextWrapping="{TemplateBinding TextWrapping}"
       Foreground="{TemplateBinding TextBrush}">
      </TextBlock>

     </Grid>

     <ContentPresenter
      Content="{TemplateBinding DecorationsContainer}"
      Visibility="{TemplateBinding ShapeVisibility}" />

     <Grid Name="EffectsContainer" />

    </Canvas>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

<Style TargetType="local:TableNode">
 <Setter Property="BorderRadius" Value="8"/>
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="local:TableNode">
    <Canvas x:Name="Adorner">

     <Canvas.Resources>
      <local:GeometryCloneConverter x:Key="geometryCloneConverter"/>
     </Canvas.Resources>

     <Grid x:Name="ContainerGrid"
      HorizontalAlignment="Stretch"
      VerticalAlignment="Stretch"
      Width="{TemplateBinding Width}"
      Height="{TemplateBinding Height}"
      Clip="{Binding BorderGeometry, Mode=OneWay,
       RelativeSource={RelativeSource TemplatedParent},
       Converter={StaticResource geometryCloneConverter}}"
      Background="{TemplateBinding Brush}"
      Opacity="{TemplateBinding ShapeOpacity}">

      <Grid.RowDefinitions>
       <RowDefinition Height="Auto" />
       <RowDefinition Height="*" />
      </Grid.RowDefinitions>

      <Rectangle Fill="{TemplateBinding CaptionBackBrush}" />

      <TextBlock
       Text="{TemplateBinding Caption}"
       FontFamily="{TemplateBinding FontFamily}"
       FontSize="{TemplateBinding FontSize}"
       FontStretch="{TemplateBinding FontStretch}"
       FontStyle="{TemplateBinding FontStyle}"
       FontWeight="{TemplateBinding FontWeight}"
       TextAlignment="Center"
       Foreground="{TemplateBinding TextBrush}"
       Height="{TemplateBinding CaptionHeight}"/>

      <Rectangle Height="1" VerticalAlignment="Bottom"
       HorizontalAlignment="Stretch" Fill="Black"/>

      <Grid x:Name="RowsGrid" Grid.Row="1" />

     </Grid>

     <Path
      Stroke="{TemplateBinding Stroke}"
      DataContext="{TemplateBinding StrokeDashArray}"
      StrokeDashArray="{Binding Converter={StaticResource dashArrayConverter}}"
      StrokeDashCap="{TemplateBinding StrokeDashCap}"
      StrokeDashOffset="{TemplateBinding StrokeDashOffset}"
      StrokeEndLineCap="{TemplateBinding StrokeEndLineCap}"
      StrokeLineJoin="{TemplateBinding StrokeLineJoin}"
      StrokeMiterLimit="{TemplateBinding StrokeMiterLimit}"
      StrokeStartLineCap="{TemplateBinding StrokeStartLineCap}"
      StrokeThickness="{TemplateBinding StrokeThickness}"
      Data="{Binding BorderGeometry, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource geometryCloneConverter}}" />

     <Grid Name="EffectsContainer" />

    </Canvas>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

<Style TargetType="local:Cell">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="local:Cell">
    <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
     BorderThickness="0, 0, 1, 1" BorderBrush="Black">
     <TextBlock
      Text="{TemplateBinding Text}"
      Foreground="{TemplateBinding Foreground}"
      TextAlignment="{TemplateBinding TextAlignment}"
      FontFamily="{TemplateBinding FontFamily}"
      FontSize="{TemplateBinding FontSize}"
      FontStretch="{TemplateBinding FontStretch}"
      FontStyle="{TemplateBinding FontStyle}"
      FontWeight="{TemplateBinding FontWeight}"
      Margin="2, 1, 2, 1" />
    </Border>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

<Style TargetType="local:TreeViewNode">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="local:TreeViewNode">
    <Canvas x:Name="Adorner">
     <Canvas.Resources>
      <local:GeometryCloneConverter x:Key="geometryCloneConverter"/>
     </Canvas.Resources>

     <Rectangle Fill="{TemplateBinding Brush}"
      Opacity="{TemplateBinding ShapeOpacity}"
      Width="{TemplateBinding Width}"
      Height="{TemplateBinding Height}" />

     <Grid Margin="0" x:Name="ContainerGrid"
      Width="{TemplateBinding Width}"
      Height="{TemplateBinding Height}">
      <Grid.RowDefinitions>
       <RowDefinition Height="Auto" />
       <RowDefinition Height="*" />
      </Grid.RowDefinitions>

      <Grid Grid.Row="0" VerticalAlignment="Top" Height="{TemplateBinding CaptionHeight}">
       <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
       </Grid.ColumnDefinitions>

       <Image x:Name="Image"
        Height="{TemplateBinding CaptionHeight}"
        Source="{TemplateBinding CaptionImage}"
        Stretch="UniformToFill"
        VerticalAlignment="Top"
        HorizontalAlignment="Left"
        Grid.Column="0" Grid.Row="0" />

       <TextBlock
        Text="{TemplateBinding Caption}"
        FontFamily="{TemplateBinding FontFamily}"
        FontSize="{TemplateBinding FontSize}"
        FontStretch="{TemplateBinding FontStretch}"
        FontStyle="{TemplateBinding FontStyle}"
        FontWeight="{TemplateBinding FontWeight}"
        Foreground="{TemplateBinding TextBrush}"
        Grid.Column="1"
        Padding="0"
        VerticalAlignment="Center"
        HorizontalAlignment="Left"
        TextAlignment="Center"
        Height="{TemplateBinding CaptionHeight}" />

       <Rectangle Height="1"
        Grid.ColumnSpan="2"
        VerticalAlignment="Bottom"
        HorizontalAlignment="Stretch"
        Fill="Black"/>
      </Grid>
      <Grid Grid.Row="1">

       <ScrollViewer
        x:Name="ScrollViewer"
        Padding="0" Margin="0"
        HorizontalScrollBarVisibility="Hidden">
        <local:TreeView Visibility="Visible"
         Margin="0"
         ItemsSource="{TemplateBinding RootItems}"
           />
       </ScrollViewer>
      </Grid>
     </Grid>

     <Path StrokeThickness="1" Stroke="Black"
      Data="{Binding BorderGeometry, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource geometryCloneConverter}}"/>

     <Grid Name="EffectsContainer" />

    </Canvas>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

<Style TargetType="local:TreeViewItem">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="local:TreeViewItem">
    <Grid Background="{TemplateBinding Background}">
     <Grid.RowDefinitions>
      <RowDefinition Height="{TemplateBinding LabelHeight}" />
      <RowDefinition Height="Auto" />
     </Grid.RowDefinitions>

     <Grid.ColumnDefinitions>
      <ColumnDefinition
       MaxWidth="20"
       MinWidth="20"
       Width="{TemplateBinding ExpanderButtonWidth}" />
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
     </Grid.ColumnDefinitions>
<!-- Width and Height set from 11 to 20 to fascilitate touch -->
     <Border
      x:Name="ExpanderButton"
      Visibility="{TemplateBinding ExpanderVisibility}"
      HorizontalAlignment="Center"
      VerticalAlignment="Center"
      Width="16" Height="16" Padding="0"
      BorderBrush="#FF9D9D9D" BorderThickness="1">

      <Border.Background>
       <LinearGradientBrush>
        <LinearGradientBrush.GradientStops>
         <GradientStop Offset="0.0" Color="#FFFDFDFD" />
         <GradientStop Offset="1.0" Color="#FFBDBDBD" />
        </LinearGradientBrush.GradientStops>
       </LinearGradientBrush>
      </Border.Background>
      <Grid>
       <Grid Visibility="{TemplateBinding ExpandedIconVisibility}">
        <Path
         Data="M 7,1 L 7,13"
         StrokeThickness="1"
         StrokeLineJoin="Miter"
             >
         <Path.Stroke>
          <SolidColorBrush Color="#FF000000" />
         </Path.Stroke>
        </Path>
       </Grid>
       <Grid>
        <Path
         Margin="0"
         Data="M 1,7 L 13,7"
         StrokeLineJoin="Miter" StrokeThickness="1">
         <Path.Stroke>
          <SolidColorBrush Color="#FF000000" />
         </Path.Stroke>
        </Path>
       </Grid>
      </Grid>
     </Border>

     <Image Grid.Column="1" Source="{TemplateBinding Image}"
      Stretch="{TemplateBinding ImageStretch}"
      x:Name="Image" IsHitTestVisible="False" />

     <Grid Grid.Column="2" Height="{TemplateBinding LabelHeight}"
      VerticalAlignment="Center" IsHitTestVisible="False" >

      <TextBlock x:Name="TextBlock"
       Text="{TemplateBinding Label}"
       FontFamily="{TemplateBinding FontFamily}"
       FontSize="{TemplateBinding FontSize}"
       FontStretch="{TemplateBinding FontStretch}"
       FontStyle="{TemplateBinding FontStyle}"
       FontWeight="{TemplateBinding FontWeight}"
       Foreground="{TemplateBinding LabelBrush}"
       VerticalAlignment="Center"
       Padding="0" />
     </Grid>

     <Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3">
      <local:TreeView x:Name="ItemsHost"
       Visibility="{TemplateBinding ItemsVisibility}"
       Margin="{TemplateBinding TreeDepth}"
       ItemsSource="{TemplateBinding Children}" />
     </Grid>
    </Grid>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

<Style TargetType="local:ExpandButton">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="local:ExpandButton">
    <Grid>
     <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">
       <VisualState x:Name="Expanded" />
       <VisualState x:Name="Collapsed">
        <Storyboard>
         <DoubleAnimation Duration="0"
          Storyboard.TargetName="CollapsedVisible"
          Storyboard.TargetProperty="(UIElement.Opacity)"
          To="1"/>
        </Storyboard>
       </VisualState>
      </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>
     <Viewbox StretchDirection="Both" VerticalAlignment="Center" HorizontalAlignment="Center" >
      <Border BorderBrush="{TemplateBinding BorderBrush}"
       BorderThickness="{TemplateBinding BorderThickness}"
       Background="{TemplateBinding Background}">
       <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <Grid>
         <Path Margin="0" Data="M 1,4.5 L 8,4.5"
          StrokeLineJoin="Miter" StrokeThickness="1">
          <Path.Stroke>
           <SolidColorBrush Color="#FF000000" />
          </Path.Stroke>
         </Path>
        </Grid>
        <Grid x:Name="CollapsedVisible" Opacity="0">
         <Path Data="M 4.5,1 L 4.5,8" StrokeThickness="1"
          StrokeLineJoin="Miter">
          <Path.Stroke>
           <SolidColorBrush Color="#FF000000" />
          </Path.Stroke>
         </Path>
        </Grid>
       </Grid>
      </Border>
     </Viewbox>
    </Grid>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

<Style TargetType="local:FoldButton">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="local:FoldButton">
    <Grid>
     <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">
       <VisualState x:Name="Unfolded" />
       <VisualState x:Name="Folded">
        <Storyboard>
         <DoubleAnimation Duration="0"
          Storyboard.TargetName="yTransform"
          Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
          To="-1"/>
        </Storyboard>
       </VisualState>
      </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>
     <Viewbox
      StretchDirection="Both"
      VerticalAlignment="Center"
      HorizontalAlignment="Center" >

      <Grid Width="10" Height="10" >
       <Grid.RenderTransform>
        <ScaleTransform
         x:Name="yTransform"
         ScaleX="1" ScaleY="1"
         CenterY="5" />
       </Grid.RenderTransform>
       <Ellipse Width="10" Height="10" Stroke="Gray"
        StrokeThickness="{Binding Width, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource strokeConverter}}" >
        <Ellipse.Fill>
         <LinearGradientBrush>
          <GradientStop Offset="0" Color="White" />
          <GradientStop Offset="1" Color="#C6CEDA" />
         </LinearGradientBrush>
        </Ellipse.Fill>
       </Ellipse>
       <Path Width="10" Height="10" Margin="0" Data="M 2,4 L 5,2, 8,4"
        StrokeLineJoin="Miter"
        StrokeThickness="{Binding Width, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource strokeConverter}}" >
        <Path.Stroke>
         <SolidColorBrush Color="#FF000000" />
        </Path.Stroke>
       </Path>
       <Path Width="10" Height="10" Margin="0" Data="M 2,7 L 5,5, 8,7"
        StrokeLineJoin="Miter"
        StrokeThickness="{Binding Width, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource strokeConverter}}" >
        <Path.Stroke>
         <SolidColorBrush Color="#FF000000" />
        </Path.Stroke>
       </Path>
      </Grid>

     </Viewbox>
    </Grid>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

<!-- ZoomButton -->
<Style TargetType="local:ZoomButton">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate  TargetType="local:ZoomButton">
    <Grid Background="Transparent">
     <Grid.RowDefinitions>
      <RowDefinition Height="67*"/>
      <RowDefinition Height="33*"/>
     </Grid.RowDefinitions>

     <Rectangle x:Name="part_Button" Grid.RowSpan="2"
      Fill="{TemplateBinding Background}"
      RadiusX="{TemplateBinding CornerRadius}"
      RadiusY="{TemplateBinding CornerRadius}"
      Stroke="{TemplateBinding BorderBrush}"                                 
      Opacity="1"
      StrokeThickness="1">
     </Rectangle>

     <Rectangle x:Name="part_ButtonGlow" Grid.RowSpan="2"     
      RadiusX="{TemplateBinding CornerRadius}"
      RadiusY="{TemplateBinding CornerRadius}"
      Stroke="{TemplateBinding GlowStroke}"
      Fill="{TemplateBinding GlowFill}"
      Opacity="0"
      StrokeThickness="1">
     </Rectangle>

     <Path x:Name="part_Glow"
      HorizontalAlignment="Left"
      Margin="0"
      Visibility="{TemplateBinding GlassEffectVisibility}"
      Clip="{TemplateBinding ClipGeometry}"
      Stretch="Fill"
      Grid.RowSpan="1">
      <Path.Fill>
       <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
        <GradientStop Offset="0" Color="#ffffffff"/>
        <GradientStop Offset="0.7" Color="#00ffffff"/>
       </LinearGradientBrush>
      </Path.Fill>
      <Path.Data>
       <PathGeometry >
        <PathGeometry.Figures>
         <PathFigure StartPoint="3,3">
          <PathFigure.Segments>
           <LineSegment Point="3,70"/>
           <BezierSegment Point1="33,35" Point2="66,20" Point3="97,35"/>
           <LineSegment Point="97,3"/>
          </PathFigure.Segments>
         </PathFigure>
        </PathGeometry.Figures>
       </PathGeometry>
      </Path.Data>
     </Path>

     <ContentPresenter Margin="0,0,0,0" Grid.RowSpan="2"
      HorizontalAlignment="Center"
      VerticalAlignment="Center">
     </ContentPresenter>


     <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">
       <VisualState x:Name="Normal"/>
       <VisualState x:Name="MouseOver">
        <Storyboard>
         <DoubleAnimation
          Storyboard.TargetName="part_ButtonGlow"
          Storyboard.TargetProperty="Opacity"
          To="1.0"          
          Duration="0:0:0">
         </DoubleAnimation>
        </Storyboard>
       </VisualState>
       <VisualState x:Name="Pressed">
        <Storyboard>
         <DoubleAnimation
          Storyboard.TargetName="part_ButtonGlow"
          Storyboard.TargetProperty="Opacity"
          To="0.0"          
          Duration="0:0:0">
         </DoubleAnimation>
         <DoubleAnimation
          Storyboard.TargetName="part_Glow"
          Storyboard.TargetProperty="Opacity"
          To="0.0"          
          Duration="0:0:0">
         </DoubleAnimation>
        </Storyboard>
       </VisualState>
      </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>
    </Grid>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>


<!-- PanButton -->
<Style x:Key="PanButtonStyle" TargetType="Button">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate  TargetType="Button">
    <Grid>
     <Rectangle x:Name="part_Button"  Margin="-2"  
      Fill="{TemplateBinding Background}"
      Opacity="0"                           
      StrokeThickness="1">
     </Rectangle>
     <Rectangle x:Name="part_ButtonGlow"  Margin="-2"   
      Fill="{TemplateBinding Foreground}"
      Opacity="0"
      StrokeThickness="1">
     </Rectangle>
     <ContentPresenter Margin="0,0,0,0" Grid.RowSpan="2"
      HorizontalAlignment="Center"
      VerticalAlignment="Center">
     </ContentPresenter>

     <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">
       <VisualState x:Name="Normal"/>
       <VisualState x:Name="MouseOver">
        <Storyboard>
         <DoubleAnimation
          Storyboard.TargetName="part_ButtonGlow"
          Storyboard.TargetProperty="Opacity"
          To="1.0"          
          Duration="0:0:0">
         </DoubleAnimation>
         <DoubleAnimation
          Storyboard.TargetName="part_Button"
          Storyboard.TargetProperty="Opacity"
          To="0.0"          
          Duration="0:0:0">
         </DoubleAnimation>
        </Storyboard>
       </VisualState>
       <VisualState x:Name="Pressed">
        <Storyboard>
         <DoubleAnimation
          Storyboard.TargetName="part_ButtonGlow"
          Storyboard.TargetProperty="Opacity"
          To="0.0"          
          Duration="0:0:0">
         </DoubleAnimation>
         <DoubleAnimation
          Storyboard.TargetName="part_Button"
          Storyboard.TargetProperty="Opacity"
          To="1.0"          
          Duration="0:0:0">
         </DoubleAnimation>
        </Storyboard>
       </VisualState>
      </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>

    </Grid>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>


<!-- ZoomControl -->
<Style TargetType="local:ZoomControl">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="local:ZoomControl">
    <Border Background="{TemplateBinding Background}"
      BorderBrush="{TemplateBinding BorderBrush}"
      BorderThickness="{TemplateBinding BorderThickness}">
     <Grid x:Name="part_MainGrid" Background="Transparent" VerticalAlignment="Stretch" MinWidth="60" MinHeight="116">
      <Grid.RowDefinitions>
       <!--Pan-->
       <RowDefinition Height="Auto"/>
       <!--Space-->
       <RowDefinition Height="20"/>
       <!--UpBut-->
       <RowDefinition Height="Auto"/>
       <!--Delta-->
       <RowDefinition/>
       <!--DownBut-->
       <RowDefinition Height="Auto"/>
       <!--Text-->
       <RowDefinition Height="Auto"/>
      </Grid.RowDefinitions>

      <Ellipse x:Name="part_PANELLIPSE"   HorizontalAlignment="Left"   
       Fill="{TemplateBinding Fill}"
       Width="50"
       Height="50"
       Stroke="{TemplateBinding Stroke}"
       StrokeThickness="1">
      </Ellipse>

      <Border HorizontalAlignment="Left" Width="50"
       Height="50">
       <Ellipse x:Name="part_PANELLIPSEGLOW"
        Visibility="{TemplateBinding GlassEffectVisibility}"
        Stroke="Transparent"
        StrokeThickness="0"
        VerticalAlignment="Top"
        Margin="0,1,0,0"
        Width="35"
        Height="30">
        <Ellipse.Fill>
         <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
          <GradientStop Offset="0" Color="#ffffffff"/>
          <GradientStop Offset="0.7" Color="#00ffffff"/>
         </LinearGradientBrush>
        </Ellipse.Fill>
       </Ellipse>
      </Border>

      <Grid Width="50" Margin="-1,-1,1,1" HorizontalAlignment="Left" Height="50">
       <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
       </Grid.RowDefinitions>
       <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
       </Grid.ColumnDefinitions>
       <Button x:Name="part_PanTop"
        Style="{StaticResource PanButtonStyle}"
        Grid.Column="1"
        Background="{TemplateBinding PanFill}"
        Foreground="{TemplateBinding PanGlowFill}"  
        Width="16"
        Height="16" 
        Margin="0,2,0,-2"
        VerticalAlignment="Bottom"
        BorderThickness="1">
        <Path Stretch="Uniform" Margin="2"
         StrokeThickness="2"
         Stroke="{TemplateBinding InnerStroke}"
         HorizontalAlignment="Center"
         VerticalAlignment="Bottom"
         Data="M 0 4 L 4 0 L 8 4 ">
        </Path>
       </Button>
       <Button x:Name="part_PanLeft"
        Style="{StaticResource PanButtonStyle}"
        Grid.Row="1"
        Background="{TemplateBinding PanFill}"
        Foreground="{TemplateBinding PanGlowFill}"     
        Width="16"
        Height="16"       
        Margin="2,0,-2,0"
        HorizontalAlignment="Right"
        BorderThickness="1">
        <Path Stretch="Uniform" Margin="2"
         StrokeThickness="2"
         Stroke="{TemplateBinding InnerStroke}"
         HorizontalAlignment="Center"
         VerticalAlignment="Center"
         Data="M 4 0 L 0 4 L 4 8 ">
        </Path>
       </Button>
       <Button x:Name="part_PanBottom"
        Style="{StaticResource PanButtonStyle}"
        Grid.Column="1"
        Grid.Row="2"
        Background="{TemplateBinding PanFill}"
        Foreground="{TemplateBinding PanGlowFill}"     
        Width="16"
        Height="16"    
        Margin="0,-2,0,2"
        VerticalAlignment="Top"
        BorderThickness="1">
        <Path Stretch="Uniform" Margin="2"
         StrokeThickness="2"
         Stroke="{TemplateBinding InnerStroke}"
         HorizontalAlignment="Center"
         VerticalAlignment="Center"
         Data="M 0 0 L 4 4 L 8 0 ">
        </Path>
       </Button>
       <Button x:Name="part_PanRight"
        Style="{StaticResource PanButtonStyle}"
        Grid.Column="2"
        Grid.Row="1"
        Background="{TemplateBinding PanFill}"
        Foreground="{TemplateBinding PanGlowFill}"     
        Width="16"
        Height="16"     
        Margin="-2,0,2,0"
        HorizontalAlignment="Left"
        BorderThickness="1">
        <Path Stretch="Uniform" Margin="2"
         StrokeThickness="2"
         Stroke="{TemplateBinding InnerStroke}"
         HorizontalAlignment="Center"
         VerticalAlignment="Center"
         Data="M 0 0 L 4 4 L 0 8 ">
        </Path>
       </Button>
      </Grid>

      <Grid x:Name="part_TicksHolder"
       Background="#00000000"
       Grid.Row="3"
       HorizontalAlignment="Left"
       VerticalAlignment="Stretch"
       Margin="0,0,0,0"
       Width="50">
      </Grid>


      <Border x:Name="part_AxisHolder"
       Background="#00000000"
       Grid.Row="3"
       HorizontalAlignment="Left"
       VerticalAlignment="Stretch"
       Margin="16,0,0,0"
       Width="18">
       <Rectangle x:Name="part_Axis" HorizontalAlignment="Left"
        Margin="7,0,0,0"
        Width="4"       
        Fill="{TemplateBinding AxisFill}"
        Stroke="{TemplateBinding Stroke}"
        StrokeThickness="1">
       </Rectangle>
      </Border>


      <local:ZoomButton x:Name="part_UpButton" Grid.Row="2" HorizontalAlignment="Left"                               
       GlassEffectVisibility="{TemplateBinding GlassEffectVisibility}"
       Background="{TemplateBinding Fill}"
       GlowFill="{TemplateBinding GlowFill}"
       GlowStroke="{TemplateBinding GlowStroke}"
       Margin="16,1,0,-1"
       Width="18"
       Height="18"   
       BorderBrush="{TemplateBinding Stroke}"
       BorderThickness="1">
       <Grid>
        <Border Width="2" Background="{TemplateBinding InnerStroke}" Height="8"/>
        <Border Width="8" Background="{TemplateBinding InnerStroke}" Height="2"/>
       </Grid>
      </local:ZoomButton>

      <local:ZoomButton x:Name="part_Delta" Grid.Row="3" HorizontalAlignment="Left"
       GlassEffectVisibility="{TemplateBinding GlassEffectVisibility}"
       Background="{TemplateBinding Fill}"
       GlowFill="{TemplateBinding GlowFill}"
       GlowStroke="{TemplateBinding GlowStroke}"
       Width="18"
       Height="10"      
       Margin="16,0,0,0"
       VerticalAlignment="Bottom"
       BorderBrush="{TemplateBinding Stroke}"
       BorderThickness="1">
       <Grid>
        <Border Width="8" Background="{TemplateBinding InnerStroke}" Height="2"/>
       </Grid>
      </local:ZoomButton>

      <local:ZoomButton x:Name="part_DownButton" Grid.Row="4" HorizontalAlignment="Left"
       GlassEffectVisibility="{TemplateBinding GlassEffectVisibility}"
       Background="{TemplateBinding Fill}"
       GlowFill="{TemplateBinding GlowFill}"
       GlowStroke="{TemplateBinding GlowStroke}"
       Margin="16,-1,0,1"
       Width="18"
       Height="18"        
       BorderBrush="{TemplateBinding Stroke}"
       BorderThickness="1">
       <Grid>
        <Border Width="8" Background="{TemplateBinding InnerStroke}" Height="2"/>
       </Grid>
      </local:ZoomButton>

      <Border Grid.Row="5"                          
       Visibility="{TemplateBinding LabelVisibility}"
       Margin="0,5,0,0"
       Width="50"
       Height="18"   
       HorizontalAlignment="Left"
       VerticalAlignment="Top">
       <TextBlock x:Name="part_ZoomFactorTextBlock"
        Text="{TemplateBinding LabelText}"
        Foreground="{TemplateBinding LabelFill}"
        FontFamily="Verdana"
        FontSize="10"
        VerticalAlignment="Center"
        HorizontalAlignment="Center"
        TextAlignment="Center">
       </TextBlock>
      </Border>

     </Grid>
    </Border>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

</ResourceDictionary>