28
Jul
09

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


0 Respuestas a “Chronos: Zoom en las ventanas”



  1. Aún no hay comentarios

calendario

Julio 2009
L M X J V S D
« Jun   Ago »
 12345
6789101112
13141516171819
20212223242526
2728293031  

a