Chronos: Zoom en las ventanas


Sigo haciendo cambios en Chronos (aunque van a tardar un tiempo en ver la luz en Codeplex), he estado viendo como hacer un Zoom sobre el contenido de las ventanas, algo realmente sencillo en WPF.

Por un lado tengo un Popup, con un Slider con el que poder modificar el Zoom a aplicar, un TextBlock para mostrar el porcentaje y un botón para cerrar el Popup (que lo cierra usando un StoryBoard que establece la propiedad IsOpen del Popup a false, para mostrar el popup se hace lo mismo en otro botón pero que establece la propiedad IsOpen a true):

   1: <Popup x:Name="ZoomView"

   2:        AllowsTransparency="True"

   3:        IsOpen="False"

   4:        Width="300"

   5:        Height="100"

   6:        StaysOpen="True"

   7:        PlacementTarget="{Binding ElementName=WindowFrame}"

   8:        Placement="Center" >

   9:

  10:     <Border Margin="5,5,5,5" CornerRadius="3,3,3,3">

  11:         <Border.Background>

  12:             <LinearGradientBrush EndPoint="0.465,-0.246" StartPoint="0.465,1.116">

  13:                 <GradientStop Color="#35000000" Offset="0"/>

  14:                 <GradientStop Color="#FF5A5C62" Offset="1"/>

  15:                 <GradientStop Color="#CE262626" Offset="0.572"/>

  16:             </LinearGradientBrush>

  17:         </Border.Background>

  18:         <Border.Effect>

  19:             <DropShadowEffect BlurRadius="10" ShadowDepth="0" Opacity="0.695" Direction="2" PresentationOptions:Freeze="True" />

  20:         </Border.Effect>

  21:         <Grid Margin="10,0,10,0">

  22:             <Grid.RowDefinitions>

  23:                 <RowDefinition Height="15" />

  24:                 <RowDefinition Height="55" />

  25:                 <RowDefinition Height="10" />

  26:             </Grid.RowDefinitions>

  27:             <Button Grid.Row="0"

  28:                     HorizontalAlignment="Right"

  29:                     Style="{StaticResource TransparentCloseButtonStyle}">

  30:                 <Button.Triggers>

  31:                     <EventTrigger RoutedEvent="ButtonBase.Click">

  32:                         <BeginStoryboard>

  33:                             <Storyboard>

  34:                                 <BooleanAnimationUsingKeyFrames Storyboard.TargetName="ZoomView"

  35:                                                                 Storyboard.TargetProperty="IsOpen"

  36:                                                                 Duration="0:0:0">

  37:                                     <DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:0" />

  38:                                 </BooleanAnimationUsingKeyFrames>

  39:                             </Storyboard>

  40:                         </BeginStoryboard>

  41:                     </EventTrigger>

  42:                 </Button.Triggers>

  43:             </Button>

  44:             <Slider x:Name="ZoomSlider"

  45:                     Grid.Row="1"

  46:                     IsTabStop="False"

  47:                     Maximum="250"

  48:                     Minimum="50"

  49:                     LargeChange="10"

  50:                     SmallChange="5"

  51:                     TickPlacement="BottomRight"

  52:                     Value="100"

  53:                     VerticalAlignment="Center"

  54:                     HorizontalAlignment="Stretch"

  55:                     Interval="5"

  56:                     TickFrequency="5"

  57:                     IsSnapToTickEnabled="True">

  58:             </Slider>

  59:             <TextBlock Grid.Row="2"

  60:                        Foreground="White"

  61:                        FontWeight="Bold"

  62:                        Text="{Binding ElementName=ZoomSlider, Path=Value, StringFormat={}{0}%}"

  63:                        HorizontalAlignment="Center"

  64:                        VerticalAlignment="Center" />

  65:         </Grid>

  66:     </Border>

  67: </Popup>

Y por otro un LayoutTransform aplicado sobre el ContentPresenter (está todo definido en un estilo personalizado para la ventana)

   1: <ContentPresenter RenderTransformOrigin="0.5, 0.5">

   2:     <ContentPresenter.LayoutTransform>

   3:         <ScaleTransform CenterX="0"

   4:                     CenterY="0"

   5:                     ScaleX="{Binding ElementName=ZoomSlider, Path=Value, Converter={StaticResource ZoomTransformConverter}}"

   6:                     ScaleY="{Binding ElementName=ZoomSlider, Path=Value, Converter={StaticResource ZoomTransformConverter}}"

   7:     />

   8:     </ContentPresenter.LayoutTransform>

   9: </ContentPresenter>

Y así es como queda … smile_teeth

image


Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s