Feedback

C# - Windows Store Apps: Buttons zum Zoomen

Veröffentlicht von am 19.07.2014
(0 Bewertungen)
Dieses Snippet zeigt ein Control mit 2 Buttons zum Zoomen und dem Zoomfaktor dazwischen. Dieses lässt sich einfach in Windows Store Apps implementieren.

Benötigte Namespaces
Windows.UI.Xaml
Windows.UI.Xaml.Controls
Windows.UI.Xaml.Controls.Primitives

Nachfolgend der Style für die Generic.xaml:
<Style TargetType="RepeatButton" x:Key="ZoomButton">
<Setter Property="FontFamily" Value="Segoe UI Symbol"/>
<Setter Property="FontSize" Value="36"/>
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackDecreasePointerOverBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackDecreasePressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackDecreaseDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackDecreaseDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}"/>

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

<Style TargetType="local:ZoomButtons">
<Setter Property="FontSize" Value="30"/>
<Setter Property="Height" Value="48"/>
<Setter Property="Width" Value="192"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:ZoomButtons">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition />
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" FontSize="{TemplateBinding FontSize}" x:Name="PART_Label" VerticalAlignment="Center" Margin="10 0 10 0" HorizontalAlignment="Center"/>
<RepeatButton Grid.Column="0" Content="&#xE1A4;" Style="{StaticResource ZoomButton}" x:Name="PART_ZoomOut" />
<RepeatButton Grid.Column="2" Content="&#xE12E;" Style="{StaticResource ZoomButton}" x:Name="PART_ZoomIn" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Snippet in VB übersetzen
[TemplatePart(Name = "PART_ZoomIn", Type = typeof(RepeatButton))]
[TemplatePart(Name = "PART_ZoomOut", Type = typeof(RepeatButton))]
[TemplatePart(Name = "PART_Label", Type = typeof(TextBlock))]
public sealed class ZoomButtons : Control
{
    public ZoomButtons()
    {
        this.DefaultStyleKey = typeof(ZoomButtons);
        this.Loaded += ZoomButtons_Loaded;
    }

    RepeatButton btnZoomIn, btnZoomOut;
    TextBlock lbl;

    void ZoomButtons_Loaded(object sender, RoutedEventArgs e)
    {
        lbl.Text = this.ZoomFactor.ToString(this.LabelFormat);
    }

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        btnZoomIn = (RepeatButton)GetTemplateChild("PART_ZoomIn");
        btnZoomOut = (RepeatButton)GetTemplateChild("PART_ZoomOut");
        lbl = (TextBlock)GetTemplateChild("PART_Label");

        btnZoomIn.Click += btnZoomIn_Click;
        btnZoomOut.Click += btnZoomOut_Click;
    }

    void btnZoomIn_Click(object sender, RoutedEventArgs e)
    {
        this.ZoomFactor *= this.ZoomChangeFactor;
        if (this.ZoomFactor > this.Maximum)
            this.ZoomFactor /= this.ZoomChangeFactor;
        lbl.Text = this.ZoomFactor.ToString(this.LabelFormat);
    }

    private void btnZoomOut_Click(object sender, RoutedEventArgs e)
    {
        this.ZoomFactor /= this.ZoomChangeFactor;
        if (this.ZoomFactor < this.Minimum)
            this.ZoomFactor *= this.ZoomChangeFactor;
        lbl.Text = this.ZoomFactor.ToString(this.LabelFormat);
    }

    #region DependencyProperties

    /// <summary>
    /// Bezeichnet die <see cref="ZoomFactor"/>-Abhängigkeitseigenschaft.
    /// </summary>
    public static readonly DependencyProperty ZoomFactorProperty = DependencyProperty.Register("ZoomFactor", typeof(double), typeof(ZoomButtons), new PropertyMetadata(1D));
    /// <summary>
    /// Bezeichnet die <see cref="ZoomChangeFactor"/>-Abhängigkeitseigenschaft.
    /// </summary>
    public static readonly DependencyProperty ZoomChangeFactorProperty = DependencyProperty.Register("ZoomChangeFactor", typeof(double), typeof(ZoomButtons), new PropertyMetadata(1.1D));
    /// <summary>
    /// Bezeichnet die <see cref="LabelFormat"/>-Abhängigkeitseigenschaft.
    /// </summary>
    public static readonly DependencyProperty LabelFormatProperty = DependencyProperty.Register("LabelFormat", typeof(string), typeof(ZoomButtons), new PropertyMetadata("P0"));
    /// <summary>
    /// Bezeichnet die <see cref="Minimum"/>-Abhängigkeitseigenschaft.
    /// </summary>
    public static readonly DependencyProperty MinimumProperty = DependencyProperty.Register("Minimum", typeof(double), typeof(ZoomButtons), new PropertyMetadata(0.1D));
    /// <summary>
    /// Bezeichnet die <see cref="Maximum"/>-Abhängigkeitseigenschaft.
    /// </summary>
    public static readonly DependencyProperty MaximumProperty = DependencyProperty.Register("Maximum", typeof(double), typeof(ZoomButtons), new PropertyMetadata(5D));

    #endregion

    #region Properties

    /// <summary>
    /// Ruft den Zoomfaktor ab oder legt diesen fest.
    /// </summary>
    public double ZoomFactor
    {
        get { return (double)GetValue(ZoomFactorProperty); }
        set { SetValue(ZoomFactorProperty, value); }
    }
    /// <summary>
    /// Ruft die Zahl ab, mit der der <see cref="ZoomFactor"/> multipliziert bzw. dividierd wird wenn auf einen Button geklickt wird, oder legt diese fest.
    /// </summary>
    public double ZoomChangeFactor
    {
        get { return (double)GetValue(ZoomChangeFactorProperty); }
        set { SetValue(ZoomChangeFactorProperty, value); }
    }
    /// <summary>
    /// Ruft das String-Format ab, mit dem der Zoomfaktor in die Zeichendarstellung umgewandelt wird, oder legt dieses fest.
    /// </summary>
    public string LabelFormat
    {
        get { return (string)GetValue(LabelFormatProperty); }
        set { SetValue(LabelFormatProperty, value); }
    }
    /// <summary>
    /// Ruft den minimal erreichbaren Zoomfaktor ab oder legt diesen fest.
    /// </summary>
    public double Minimum
    {
        get { return (double)GetValue(MinimumProperty); }
        set { SetValue(MinimumProperty, value); }
    }
    /// <summary>
    /// Ruft den maximal erreichbaren Zoomfaktor ab oder legt diesen fest.
    /// </summary>
    public double Maximum
    {
        get { return (double)GetValue(MaximumProperty); }
        set { SetValue(MaximumProperty, value); }
    }

    #endregion
}
Abgelegt unter Zoom, Control, WindowsStoreApps.

Kommentare zum Snippet

 

Logge dich ein, um hier zu kommentieren!