wpftoolkit/ExtendedWPFToolkitSolution/Src/Xceed.Wpf.Toolkit.LiveExplorer/Samples/Zoombox/Views/ZoomboxView.xaml

<!--**************************************************************************************

   Toolkit for WPF

   Copyright (C) 2007-2020 Xceed Software Inc.

   This program is provided to you under the terms of the XCEED SOFTWARE, INC.
   COMMUNITY LICENSE AGREEMENT (for non-commercial use) as published at 
   https://github.com/xceedsoftware/wpftoolkit/blob/master/license.md  

   For more features, controls, and fast professional support,
   pick up the Plus Edition at https://xceed.com/xceed-toolkit-plus-for-wpf/

   Stay informed: follow @datagrid on Twitter or Like http://facebook.com/datagrids

  *************************************************************************************-->
<local:DemoView x:Class="Xceed.Wpf.Toolkit.LiveExplorer.Samples.Zoombox.Views.ZoomboxView"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:local="clr-namespace:Xceed.Wpf.Toolkit.LiveExplorer"
                 xmlns:conv="clr-namespace:Xceed.Wpf.Toolkit.LiveExplorer.Samples.Zoombox.Converters"
                 xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
                 Title="Zoombox">
    <local:DemoView.Description>
        <Paragraph FontSize="14" FontFamily="Segoe">
           The Zoombox control provides zoom and pan functionality for any UIElement (its content) that has a discrete size. It allows the content to be scaled up (zoomed in) or scaled down (zoomed out) using the mouse wheel, key bindings, or programmatically through methods and properties exposed by the control. Similarly, the content can be panned (translated) in any direction by dragging it with the mouse, using key bindings, or programmatically through methods and properties exposed by the control.&#x0a;&#x0a;The Zoombox control also provides a view finder that acts as a reduced-scale map of the contained element, showing exactly which portion of the content is visible within the Zoombox's viewport.
        </Paragraph>
    </local:DemoView.Description>


   <Grid Grid.Row="1" 
         HorizontalAlignment="Stretch"
         VerticalAlignment="Stretch">
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width="Auto" />
         <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>

      <TabControl Margin="20,20,0,20"
                  Width="360"
                  Grid.Column="0"
                  Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
                  DataContext="{Binding ElementName=zoombox}">
         <TabControl.Resources>
            <xctk:RoundedValueConverter x:Key="Round"
                                        Precision="2" />

            <conv:RectConverter x:Key="rectConverter" />
            <conv:PointConverter x:Key="pointConverter" />
            <conv:ViewNameConverter x:Key="viewNameConverter" />
            <conv:ViewFinderConverter x:Key="viewFinderConverter" />
            <conv:ViewStackCountConverter x:Key="viewStackCountConverter" />

            <XmlDataProvider x:Key="Props"
                             Source="../Resources/ZoomboxProperties.xml"
                             XPath="Properties" />
            <Style x:Key="PropertyList"
                   TargetType="{x:Type ItemsControl}">
               <Setter Property="IsTabStop"
                       Value="False" />
               <Setter Property="Template">
                  <Setter.Value>
                     <ControlTemplate TargetType="{x:Type ItemsControl}">
                        <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                                      VerticalScrollBarVisibility="Auto">
                           <StackPanel IsItemsHost="True" />
                        </ScrollViewer>
                     </ControlTemplate>
                  </Setter.Value>
               </Setter>
            </Style>

            <Style x:Key="{x:Type ItemsControl}"
                   TargetType="{x:Type ItemsControl}">
               <Setter Property="IsTabStop"
                       Value="False" />
               <Setter Property="Template">
                  <Setter.Value>
                     <ControlTemplate TargetType="{x:Type ItemsControl}">
                        <Grid MinHeight="45"
                              x:Name="ItemGrid">
                           <Popup AllowsTransparency="True"
                                  Placement="Bottom"
                                  PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                                  HorizontalOffset="75"
                                  IsOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsMouseOver, Mode=OneWay}">
                              <Border Name="Border"
                                      Background="#FFC72035"
                                      BorderBrush="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"
                                      Margin="0"
                                      BorderThickness="1"
                                      CornerRadius="10">
                                 <TextBlock Margin="7"
                                            MaxWidth="500"
                                            TextWrapping="Wrap"
                                            Foreground="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"
                                            Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Tag.InnerText}" />
                              </Border>
                           </Popup>
                           <Rectangle Grid.ColumnSpan="3"
                                      Fill="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
                                      Stroke="{x:Null}"
                                      StrokeThickness="0"
                                      RadiusX="0"
                                      RadiusY="0"
                                      Margin="5,5,5,5" />
                           <Grid IsItemsHost="True"
                                 Margin="15,0">
                              <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="160" />
                                 <ColumnDefinition Width="100" />
                                 <ColumnDefinition Width="100" />
                              </Grid.ColumnDefinitions>
                           </Grid>
                        </Grid>
                     </ControlTemplate>
                  </Setter.Value>
               </Setter>
            </Style>

            <Style x:Key="{x:Type TextBlock}"
                   BasedOn="{StaticResource {x:Type TextBlock}}"
                   TargetType="{x:Type TextBlock}">
               <Setter Property="HorizontalAlignment"
                       Value="Left" />
               <Setter Property="VerticalAlignment"
                       Value="Center" />
               <Setter Property="Height"
                       Value="Auto" />
            </Style>

            <Style x:Key="{x:Type Slider}"
                   BasedOn="{StaticResource {x:Type Slider}}"
                   TargetType="{x:Type Slider}">
               <Setter Property="HorizontalAlignment"
                       Value="Stretch" />
               <Setter Property="VerticalAlignment"
                       Value="Center" />
               <Setter Property="Height"
                       Value="Auto" />
               <Setter Property="Width"
                       Value="Auto" />
               <Setter Property="Margin"
                       Value="5" />
               <Setter Property="Grid.Column"
                       Value="1" />
            </Style>

            <Style x:Key="{x:Type CheckBox}"
                   BasedOn="{StaticResource {x:Type CheckBox}}"
                   TargetType="{x:Type CheckBox}">
               <Setter Property="HorizontalAlignment"
                       Value="Center" />
               <Setter Property="VerticalAlignment"
                       Value="Center" />
               <Setter Property="Margin"
                       Value="5" />
               <Setter Property="Grid.Column"
                       Value="1" />
            </Style>

            <Style x:Key="{x:Type TextBox}"
                   BasedOn="{StaticResource {x:Type TextBox}}"
                   TargetType="{x:Type TextBox}">
               <Setter Property="HorizontalAlignment"
                       Value="Stretch" />
               <Setter Property="VerticalAlignment"
                       Value="Center" />
               <Setter Property="Height"
                       Value="Auto" />
               <Setter Property="Margin"
                       Value="5" />
               <Setter Property="Grid.Column"
                       Value="1" />
            </Style>

            <Style x:Key="{x:Type ComboBox}"
                   BasedOn="{StaticResource {x:Type ComboBox}}"
                   TargetType="{x:Type ComboBox}">
               <Setter Property="HorizontalAlignment"
                       Value="Stretch" />
               <Setter Property="VerticalAlignment"
                       Value="Center" />
               <Setter Property="Height"
                       Value="26" />
               <Setter Property="Width"
                       Value="Auto" />
               <Setter Property="Margin"
                       Value="10,5" />
               <Setter Property="Grid.Column"
                       Value="1" />
               <Setter Property="SelectedValuePath"
                       Value="Content" />
            </Style>

         </TabControl.Resources>

         <TabItem Header="Animation">
            <ItemsControl Style="{StaticResource PropertyList}">

               <TextBlock Margin="5,10,5,5"
                          FontWeight="Bold"
                          FontSize="12"
                          Text="Animation Properties" />
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=AnimationAccelerationRatio}">
                  <TextBlock Text="AnimationAccelerationRatio" />
                  <Slider Name="AccelerationSlider"
                          Maximum="1.0"
                          Minimum="0.0"
                          Value="{Binding AnimationAccelerationRatio}"
                          ValueChanged="CoerceAnimationRatios" />
                  <TextBlock Grid.Column="2"
                             Width="50"
                             Text="{Binding AnimationAccelerationRatio}"
                             TextTrimming="CharacterEllipsis" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=AnimationDecelerationRatio}">
                  <TextBlock Text="AnimationDecelerationRatio" />
                  <Slider Name="DecelerationSlider"
                          Maximum="1.0"
                          Minimum="0.0"
                          Value="{Binding AnimationDecelerationRatio}"
                          ValueChanged="CoerceAnimationRatios" />
                  <TextBlock Grid.Column="2"
                             Width="50"
                             Text="{Binding AnimationDecelerationRatio}"
                             TextTrimming="CharacterEllipsis" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=AnimationDuration}">
                  <TextBlock Text="AnimationDuration" />
                  <Slider IsSnapToTickEnabled="True"
                          TickFrequency="50"
                          Minimum="0"
                          Maximum="2000"
                          Value="{Binding AnimationDuration.TimeSpan.TotalMilliseconds, Mode=OneWay}"
                          ValueChanged="AdjustAnimationDuration" />
                  <TextBlock Grid.Column="2"
                             Text="{Binding AnimationDuration}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=IsAnimated}">
                  <TextBlock Text="IsAnimated" />
                  <CheckBox IsChecked="{Binding IsAnimated}" />
               </ItemsControl>

            </ItemsControl>
         </TabItem>

         <TabItem Header="Keyboard">
            <ItemsControl Style="{StaticResource PropertyList}">

               <TextBlock Margin="5"
                          FontWeight="Bold"
                          FontSize="12"
                          Text="KeyModifier Collections" />
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=DragModifiers}">
                  <TextBlock Text="DragModifiers" />
                  <TextBox Text="{Binding DragModifiers, UpdateSourceTrigger=PropertyChanged}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=RelativeZoomModifiers}">
                  <TextBlock Text="RelativeZoomModifiers" />
                  <TextBox Text="{Binding RelativeZoomModifiers, UpdateSourceTrigger=PropertyChanged}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=ZoomModifiers}">
                  <TextBlock Text="ZoomModifiers" />
                  <TextBox Text="{Binding ZoomModifiers, UpdateSourceTrigger=PropertyChanged}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=ZoomToSelectionModifiers}">
                  <TextBlock Text="ZoomToSelectionModifiers" />
                  <TextBox Text="{Binding ZoomToSelectionModifiers, UpdateSourceTrigger=PropertyChanged}" />
               </ItemsControl>

               <TextBlock Margin="5"
                          FontWeight="Bold"
                          FontSize="12"
                          Text="Response to Preview Events" />
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=DragOnPreview}">
                  <TextBlock Text="DragOnPreview" />
                  <CheckBox IsChecked="{Binding DragOnPreview}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=NavigateOnPreview}">
                  <TextBlock Text="NavigateOnPreview" />
                  <CheckBox IsChecked="{Binding NavigateOnPreview}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=ZoomOnPreview}">
                  <TextBlock Text="ZoomOnPreview" />
                  <CheckBox IsChecked="{Binding ZoomOnPreview}" />
               </ItemsControl>

               <TextBlock Margin="5,10,5,5"
                          FontWeight="Bold"
                          FontSize="12"
                          Text="Input States" />
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=IsUsingScrollBars}">
                  <TextBlock Text="IsUsingScrollBars"
                             Grid.ColumnSpan="2" />
                  <CheckBox IsChecked="{Binding IsUsingScrollBars}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=AreDragModifiersActive}">
                  <TextBlock Text="AreDragModifiersActive"
                             Grid.ColumnSpan="2" />
                  <CheckBox IsEnabled="False"
                            IsChecked="{Binding AreDragModifiersActive, Mode=OneWay}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=AreRelativeZoomModifiersActive}">
                  <TextBlock Text="AreRelativeZoomModifiersActive"
                             Grid.ColumnSpan="2" />
                  <CheckBox IsEnabled="False"
                            IsChecked="{Binding AreRelativeZoomModifiersActive, Mode=OneWay}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=AreZoomModifiersActive}">
                  <TextBlock Text="AreZoomModifiersActive"
                             Grid.ColumnSpan="2" />
                  <CheckBox IsEnabled="False"
                            IsChecked="{Binding AreZoomModifiersActive, Mode=OneWay}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=AreZoomToSelectionModifiersActive}">
                  <TextBlock Text="AreZoomToSelectionModifiersActive"
                             Grid.ColumnSpan="2" />
                  <CheckBox IsEnabled="False"
                            IsChecked="{Binding AreZoomToSelectionModifiersActive, Mode=OneWay}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=IsDraggingContent}">
                  <TextBlock Text="IsDraggingContent"
                             Grid.ColumnSpan="2" />
                  <CheckBox IsEnabled="False"
                            IsChecked="{Binding IsDraggingContent, Mode=OneWay}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=IsSelectingRegion}">
                  <TextBlock Text="IsSelectingRegion"
                             Grid.ColumnSpan="2" />
                  <CheckBox IsEnabled="False"
                            IsChecked="{Binding IsSelectingRegion, Mode=OneWay}" />
               </ItemsControl>
            </ItemsControl>
         </TabItem>

         <TabItem Header="Position &amp; Scale">
            <ItemsControl Style="{StaticResource PropertyList}">

               <TextBlock Margin="5,10,5,5"
                          FontWeight="Bold"
                          FontSize="12"
                          Text="Position Properties" />
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=PanDistance}">
                  <TextBlock Text="PanDistance" />
                  <TextBox Text="{Binding PanDistance, UpdateSourceTrigger=PropertyChanged}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=Position}">
                  <TextBlock Text="Position" />
                  <TextBox IsEnabled="False" 
                           Text="{Binding Position, Mode=OneWay, Converter={StaticResource pointConverter}}" />
               </ItemsControl>

               <TextBlock Margin="5,10,5,5"
                          FontWeight="Bold"
                          FontSize="12"
                          Text="Scale Properties" />
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=AutoWrapContentWithViewbox}">
                  <TextBlock Text="AutoWrapContentWithViewbox"
                             Grid.ColumnSpan="2" />
                  <CheckBox IsChecked="{Binding AutoWrapContentWithViewbox}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=MaxScale}">
                  <TextBlock Text="MaxScale" />
                  <TextBox Text="{Binding MaxScale, UpdateSourceTrigger=PropertyChanged}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=MinScale}">
                  <TextBlock Text="MinScale" />
                  <TextBox Text="{Binding MinScale, UpdateSourceTrigger=PropertyChanged}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=Scale}">
                  <TextBlock Text="Scale" />
                  <TextBox Text="{Binding Scale, UpdateSourceTrigger=PropertyChanged}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=ZoomOrigin}">
                  <TextBlock Text="ZoomOrigin" />
                  <TextBox Text="{Binding ZoomOrigin, UpdateSourceTrigger=PropertyChanged}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=ZoomPercentage}">
                  <TextBlock Text="ZoomPercentage" />
                  <TextBox Text="{Binding ZoomPercentage, UpdateSourceTrigger=PropertyChanged}" />
               </ItemsControl>

            </ItemsControl>
         </TabItem>

         <TabItem Header="View">
            <ItemsControl Style="{StaticResource PropertyList}">

               <TextBlock Margin="5,10,5,5"
                          FontWeight="Bold"
                          FontSize="12"
                          Text="View Properties" />
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=CurrentView}">
                  <TextBlock Text="CurrentView" />
                  <TextBox IsEnabled="False"
                           Text="{Binding CurrentView, Converter={StaticResource viewNameConverter}, Mode=OneWay}"
                           Grid.ColumnSpan="2"
                           Height="Auto"
                           Width="155"
                           Margin="5,10"
                           HorizontalAlignment="Left"
                           TextWrapping="WrapWithOverflow" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=CurrentViewIndex}">
                  <TextBlock Text="CurrentViewIndex" />
                  <TextBox IsEnabled="False"
                           Text="{Binding CurrentViewIndex, Mode=OneWay}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=EffectiveViewStackMode}">
                  <TextBlock Text="EffectiveViewStackMode" />
                  <TextBox IsEnabled="False"
                           Text="{Binding EffectiveViewStackMode, Mode=OneWay}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=HasBackStack}">
                  <TextBlock Text="HasBackStack" />
                  <CheckBox IsEnabled="False"
                            IsChecked="{Binding HasBackStack, Mode=OneWay}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=HasForwardStack}">
                  <TextBlock Text="HasForwardStack" />
                  <CheckBox IsEnabled="False"
                            IsChecked="{Binding HasForwardStack, Mode=OneWay}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=ViewFinder}">
                  <TextBlock Text="ViewFinder" />
                  <TextBox IsEnabled="False"
                           Text="{Binding ViewFinder, Converter={StaticResource viewFinderConverter}, Mode=OneWay}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=ViewFinderVisibility}">
                  <TextBlock Text="ViewFinderVisibility" />
                  <ComboBox  SelectedValue="{Binding ViewFinderVisibility}">
                     <ComboBoxItem Content="{x:Static Visibility.Collapsed}" />
                     <ComboBoxItem Content="{x:Static Visibility.Hidden}" />
                     <ComboBoxItem Content="{x:Static Visibility.Visible}" />
                  </ComboBox>
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=Viewport}">
                  <TextBlock Text="Viewport" />
                  <TextBox IsEnabled="False"
                           Text="{Binding Viewport, Converter={StaticResource rectConverter}, Mode=OneWay}"
                           Grid.ColumnSpan="2"
                           Width="155"
                           Margin="5,10"
                           HorizontalAlignment="Left" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=ViewStack}">
                  <TextBlock Text="ViewStack" />
                  <TextBox IsEnabled="False"
                           Text="{Binding ViewStack, Mode=OneWay}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=ViewStackCount}">
                  <TextBlock Text="ViewStackCount" />
                  <TextBox IsEnabled="False"
                           Text="{Binding ViewStackCount, Mode=OneWay}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=ViewStackIndex}">
                  <TextBlock Text="ViewStackIndex" />
                  <Slider Minimum="0"
                          Maximum="{Binding ViewStackCount, Converter={StaticResource viewStackCountConverter}}"
                          Value="{Binding ViewStackIndex}" />
                  <TextBlock Grid.Column="2"
                             Width="50"
                             Text="{Binding ViewStackIndex}" />
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=ViewStackMode}">
                  <TextBlock Text="ViewStackMode" />
                  <ComboBox  SelectedValue="{Binding ViewStackMode}">
                     <ComboBoxItem Content="{x:Static xctk:ZoomboxViewStackMode.Auto}" />
                     <ComboBoxItem Content="{x:Static xctk:ZoomboxViewStackMode.Default}" />
                     <ComboBoxItem Content="{x:Static xctk:ZoomboxViewStackMode.Disabled}" />
                     <ComboBoxItem Content="{x:Static xctk:ZoomboxViewStackMode.Manual}" />
                  </ComboBox>
               </ItemsControl>
               <ItemsControl Tag="{Binding Source={StaticResource Props}, XPath=ViewStackSource}">
                  <TextBlock Text="ViewStackSource" />
                  <TextBox IsEnabled="False"
                           Text="{Binding ViewStackSource}" />
               </ItemsControl>
            </ItemsControl>
         </TabItem>
      </TabControl>
      <xctk:Zoombox x:Name="zoombox"
                    ViewStackIndex="0"
                    Grid.Column="1"
                    Margin="20"
                    Focusable="True"
                    IsTabStop="True">
         <xctk:Zoombox.ViewStack>
            <xctk:ZoomboxView>Fit</xctk:ZoomboxView>
         </xctk:Zoombox.ViewStack>
         <Image Source="../Resources/Default.jpg" />

      </xctk:Zoombox>
   </Grid>
</local:DemoView>