ZoomBox.xaml 13.9 KB
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:s="clr-namespace:RoboforkApp">

    <Style TargetType="{x:Type s:ZoomBox}">

        <Style.Resources>

            <VisualBrush x:Key="AlphaBrush"
                         Stretch="None"
                         TileMode="Tile"
                         ViewportUnits="Absolute"
                         Viewport="0,0,8,8">
                <VisualBrush.Visual>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="4" />
                            <ColumnDefinition Width="4" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="4" />
                            <RowDefinition Height="4" />
                        </Grid.RowDefinitions>
                        <Rectangle Fill="#EEE"
                                   Grid.Row="0"
                                   Grid.Column="0" />
                        <Rectangle Fill="#AAA"
                                   Grid.Row="0"
                                   Grid.Column="1" />
                        <Rectangle Fill="#AAA"
                                   Grid.Row="1"
                                   Grid.Column="0" />
                        <Rectangle Fill="#EEE"
                                   Grid.Row="1"
                                   Grid.Column="1" />
                    </Grid>
                </VisualBrush.Visual>
            </VisualBrush>

            <Style x:Key="ToggleButtonStyle"
                   TargetType="ToggleButton">
                <Setter Property="SnapsToDevicePixels"
                        Value="true" />
                <Setter Property="OverridesDefaultStyle"
                        Value="true" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                            <Border x:Name="Border"
                                    Background="{StaticResource NormalBrush}">
                                <ContentPresenter />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver"
                                         Value="true">
                                    <Setter TargetName="Border"
                                            Property="Background"
                                            Value="{StaticResource DarkBrush}" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style TargetType="Expander">
                <Setter Property="SnapsToDevicePixels"
                        Value="true" />
                <Setter Property="OverridesDefaultStyle"
                        Value="true" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Expander">
                            <DockPanel>
                                <ToggleButton Style="{StaticResource ToggleButtonStyle}"
                                              DockPanel.Dock="Top"
                                              IsChecked="{Binding Path=IsExpanded,Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                              HorizontalContentAlignment="Left"
                                              VerticalContentAlignment="Center">
                                    <ToggleButton.Content>
                                        <Grid Margin="4">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="20" />
                                                <ColumnDefinition Width="*" />
                                            </Grid.ColumnDefinitions>
                                            <Path Grid.Column="0"
                                                  SnapsToDevicePixels="True"
                                                  Name="Arrow"
                                                  Fill="{TemplateBinding Foreground}"
                                                  Stroke="{TemplateBinding Foreground}"
                                                  StrokeThickness="0.5"
                                                  RenderTransformOrigin="0.5,0.5"
                                                  HorizontalAlignment="Center"
                                                  VerticalAlignment="Center"
                                                  Data="M 0 0 L 0 8 L 5 4 Z">
                                                <Path.RenderTransform>
                                                    <RotateTransform Angle="0" />
                                                </Path.RenderTransform>
                                            </Path>
                                            <ContentPresenter Grid.Column="1"
                                                              Name="HeaderContent"
                                                              ContentSource="Header" />
                                        </Grid>
                                    </ToggleButton.Content>
                                </ToggleButton>
                                <Border Name="Content">
                                    <Border.LayoutTransform>
                                        <ScaleTransform ScaleY="0" />
                                    </Border.LayoutTransform>
                                    <ContentPresenter Content="{TemplateBinding Content}" />
                                </Border>
                            </DockPanel>
                            <ControlTemplate.Triggers>
                                <Trigger Property="Expander.IsExpanded"
                                         Value="True">
                                    <Trigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="Content"
                                                                 Storyboard.TargetProperty="LayoutTransform.ScaleY"
                                                                 To="1"
                                                                 Duration="0:0:0.3" />
                                                <DoubleAnimation Storyboard.TargetName="Content"
                                                                 Storyboard.TargetProperty="Opacity"
                                                                 To="1"
                                                                 Duration="0:0:0.3" />
                                                <DoubleAnimation Storyboard.TargetName="Arrow"
                                                                 Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(RotateTransform.Angle)"
                                                                 Duration="0:0:0.2"
                                                                 To="90"
                                                                 DecelerationRatio="1" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.EnterActions>
                                    <Trigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="Content"
                                                                 Storyboard.TargetProperty="LayoutTransform.ScaleY"
                                                                 To="0"
                                                                 Duration="0:0:0.3" />
                                                <DoubleAnimation Storyboard.TargetName="Content"
                                                                 Storyboard.TargetProperty="Opacity"
                                                                 To="0"
                                                                 Duration="0:0:0.3" />
                                                <DoubleAnimation Storyboard.TargetName="Arrow"
                                                                 Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(RotateTransform.Angle)"
                                                                 Duration="0:0:0.2"
                                                                 AccelerationRatio="1" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.ExitActions>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

        </Style.Resources>

        <Setter Property="SnapsToDevicePixels"
                Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type s:ZoomBox}">
                    <Border CornerRadius="1"
                            BorderThickness="1"
                            Background="#EEE"
                            BorderBrush="DimGray">
                        <Expander IsExpanded="True"
                                  Background="Transparent">
                            <Border BorderBrush="DimGray"
                                    BorderThickness="0,1,0,0"
                                    Padding="0"
                                    Height="180">
                                <Grid>
                                    <Canvas Margin="5"
                                            Name="PART_ZoomCanvas">
                                        <Canvas.Background>
                                            <VisualBrush Stretch="Uniform"
                                                         Visual="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ScrollViewer.Content}" />
                                        </Canvas.Background>
                                        <Thumb Name="PART_ZoomThumb"
                                               Cursor="SizeAll">
                                            <Thumb.Style>
                                                <Style TargetType="Thumb">
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate TargetType="Thumb">
                                                                <Rectangle StrokeThickness="1"
                                                                           Stroke="Black"
                                                                           Fill="Transparent" />
                                                            </ControlTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                </Style>
                                            </Thumb.Style>
                                        </Thumb>
                                    </Canvas>
                                </Grid>
                            </Border>
                            <Expander.Header>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Slider Name="PART_ZoomSlider"
                                            VerticalAlignment="Center"
                                            HorizontalAlignment="Center"
                                            Margin="0"
                                            Ticks="25,50,75,100,125,150,200,300,400,500"
                                            Minimum="25"
                                            Maximum="500"
                                            Value="100"
                                            IsSnapToTickEnabled="True"
                                            IsMoveToPointEnabled="False" />

                                    <TextBlock Text="{Binding ElementName=PART_ZoomSlider, Path=Value}"
                                               Grid.Column="1"
                                               VerticalAlignment="Center"
                                               HorizontalAlignment="Right"
                                               Margin="0,0,14,0" />
                                    <TextBlock Text="%"
                                               Grid.Column="1"
                                               VerticalAlignment="Center"
                                               HorizontalAlignment="Right"
                                               Margin="1,0,2,0" />
                                </Grid>
                            </Expander.Header>
                        </Expander>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>