Estilos e modelos de SemanticZoom

Applies to Windows and Windows Phone

Este tópico descreve estilos e modelos para o controle SemanticZoom. Você pode modificar esses recursos e o ControlTemplate padrão para dar uma aparência única ao controle.

Estados visuais

Estes são os VisualStates definidos no estilo padrão do controle.

Esta tabela mostra os estados visuais do zoom semântico.

Nome de VisualStateNome de VisualStateGroupDescrição
ZoomInViewSemanticZoomStatesA exibição ampliada é mostrada.
ZoomOutViewSemanticZoomStatesA exibição reduzida é mostrada.
ZoomOutButtonVisibleZoomOutButtonStatesO botão reduzido é mostrado.
ZoomOutButtonHiddenZoomOutButtonStatesO botão reduzido não é mostrado.

 

Esta tabela mostra os estados visuais do botão de redução.

Nome de VisualStateNome de VisualStateGroupDescrição
NormalCommonStatesO estado padrão.
PointerOverCommonStatesO ponteiro é posicionado sobre o controle.
PressedCommonStatesO controle é pressionado.

 

Recursos de tema

Estes recursos são usados no estilo padrão do controle.

Pincéis para temas escuros

Para alterar as cores do controle no tema escuro, substitua esses pincéis em App.xaml.


<SolidColorBrush x:Key="SemanticZoomButtonBackgroundThemeBrush" Color="#59D5D5D5" />
<SolidColorBrush x:Key="SemanticZoomButtonBorderThemeBrush" Color="#59D5D5D5" />
<SolidColorBrush x:Key="SemanticZoomButtonForegroundThemeBrush" Color="#99000000" />
<SolidColorBrush x:Key="SemanticZoomButtonPointerOverBackgroundThemeBrush" Color="#FFDADADA" />
<SolidColorBrush x:Key="SemanticZoomButtonPointerOverBorderThemeBrush" Color="#FFDADADA" />
<SolidColorBrush x:Key="SemanticZoomButtonPointerOverForegroundThemeBrush" Color="#FF000000" />
<SolidColorBrush x:Key="SemanticZoomButtonPressedBackgroundThemeBrush" Color="#99000000" />
<SolidColorBrush x:Key="SemanticZoomButtonPressedBorderThemeBrush" Color="#99000000" />
<SolidColorBrush x:Key="SemanticZoomButtonPressedForegroundThemeBrush" Color="#FFFFFFFF" />

Pincéis para temas claros

Para alterar as cores do controle no tema claro, substitua esses pincéis em App.xaml.


<SolidColorBrush x:Key="SemanticZoomButtonBackgroundThemeBrush" Color="#59D5D5D5" />
<SolidColorBrush x:Key="SemanticZoomButtonBorderThemeBrush" Color="#59D5D5D5" />
<SolidColorBrush x:Key="SemanticZoomButtonForegroundThemeBrush" Color="#99000000" />
<SolidColorBrush x:Key="SemanticZoomButtonPointerOverBackgroundThemeBrush" Color="#FFDADADA" />
<SolidColorBrush x:Key="SemanticZoomButtonPointerOverBorderThemeBrush" Color="#FFDADADA" />
<SolidColorBrush x:Key="SemanticZoomButtonPointerOverForegroundThemeBrush" Color="#FF000000" />
<SolidColorBrush x:Key="SemanticZoomButtonPressedBackgroundThemeBrush" Color="#99000000" />
<SolidColorBrush x:Key="SemanticZoomButtonPressedBorderThemeBrush" Color="#99000000" />
<SolidColorBrush x:Key="SemanticZoomButtonPressedForegroundThemeBrush" Color="#FFFFFFFF" />

Outros recursos


<x:Double x:Key="SemanticZoomButtonFontSize">14.667</x:Double>

Para saber mais sobre recursos de tema, incluindo os valores que são usados para o tema HighContrast, veja referência de recursos de tema de XAML.

Estilo padrão


<!-- Default style for Windows.UI.Xaml.Controls.SemanticZoom -->
<Style TargetType="SemanticZoom">
    <Setter Property="Padding" Value="3" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="TabNavigation" Value="Once" />
    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
    <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
    <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="SemanticZoom">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="SemanticZoomStates">
                            <VisualState x:Name="ZoomInView">
                                <Storyboard>
                                    <FadeOutThemeAnimation TargetName="ZoomedOutPresenter" />
                                    <FadeInThemeAnimation TargetName="ZoomedInPresenter" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="ZoomOutView">
                                <Storyboard>
                                    <FadeOutThemeAnimation TargetName="ZoomedInPresenter" />
                                    <FadeInThemeAnimation TargetName="ZoomedOutPresenter" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ZoomOutButtonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition From="ZoomOutButtonVisible"
                                                  To="ZoomOutButtonHidden">
                                    <Storyboard BeginTime="0:0:3">
                                        <FadeOutThemeAnimation TargetName="ZoomOutButton" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible"
                                                                       Storyboard.TargetName="ZoomOutButton">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <x:Boolean>False</x:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualTransition>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="ZoomOutButtonVisible">
                                <Storyboard>
                                    <FadeInThemeAnimation TargetName="ZoomOutButton" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="ZoomOutButtonHidden">
                                <Storyboard>
                                    <FadeOutThemeAnimation TargetName="ZoomOutButton" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible"
                                                                   Storyboard.TargetName="ZoomOutButton">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <x:Boolean>False</x:Boolean>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ScrollViewer
                      x:Name="ScrollViewer"
                      HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" 
                      HorizontalScrollBarVisibility="Hidden"
                      VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                      VerticalScrollBarVisibility="Hidden"
                      IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                      IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                      ZoomMode="Enabled"
                      IsZoomChainingEnabled="True"
                      IsZoomInertiaEnabled="False"
                      IsScrollInertiaEnabled="True"
                      HorizontalContentAlignment="Center" 
                      VerticalContentAlignment="Center" 
                      MinZoomFactor="0.5"
                      MaxZoomFactor="1.0"
                      AutomationProperties.AccessibilityView="Raw">
                        <ScrollViewer.Template>
                            <ControlTemplate TargetType="ScrollViewer">
                                <ScrollContentPresenter
                                  x:Name="ScrollContentPresenter"
                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                  Margin="{TemplateBinding Padding}" />
                            </ControlTemplate>
                        </ScrollViewer.Template>
                        <Border
                          RenderTransformOrigin="0, 0"
                          Background="{TemplateBinding Background}"
                          BorderBrush="{TemplateBinding BorderBrush}"
                          BorderThickness="{TemplateBinding BorderThickness}">
                           <Border.RenderTransform>
                              <CompositeTransform x:Name="ManipulatedElementTransform" />
                            </Border.RenderTransform> 
                            <Grid Margin="{TemplateBinding Padding}">
                                <ContentPresenter
                                  x:Name="ZoomedInPresenter"
                                  RenderTransformOrigin="0.5, 0.5"
                                  Visibility="Collapsed"
                                  IsHitTestVisible="False"
                                  Content="{TemplateBinding ZoomedInView}">
                                    <ContentPresenter.RenderTransform>
                                        <CompositeTransform x:Name="ZoomedInTransform" />
                                    </ContentPresenter.RenderTransform> 
                                </ContentPresenter>
                                <ContentPresenter
                                  x:Name="ZoomedOutPresenter" 
                                  RenderTransformOrigin="0.5, 0.5"
                                  Content="{TemplateBinding ZoomedOutView}"
                                  IsHitTestVisible="False"
                                  Visibility="Collapsed">
                                      <ContentPresenter.RenderTransform>
                                          <CompositeTransform x:Name="ZoomedOutTransform" />
                                      </ContentPresenter.RenderTransform> 
                                </ContentPresenter> 
                            </Grid>
                        </Border>
                    </ScrollViewer>
                    <Button x:Name="ZoomOutButton"
                            IsTabStop="False"
                            Margin="0,0,7,24"
                            HorizontalAlignment="Right"
                            VerticalAlignment="Bottom">
                        <Button.Template>
                            <ControlTemplate TargetType="Button">
                                <Border x:Name="Root"
                                        Height="21"
                                        Width="21"
                                        Background="{ThemeResource SemanticZoomButtonBackgroundThemeBrush}"
                                        BorderBrush="{ThemeResource SemanticZoomButtonBorderThemeBrush}"
                                        BorderThickness="1">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="NormalStates">
                                            <VisualState x:Name="Normal" />
                                            <VisualState x:Name="PointerOver">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                                   Storyboard.TargetProperty="Background">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SemanticZoomButtonPointerOverBackgroundThemeBrush}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                                   Storyboard.TargetProperty="BorderBrush">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SemanticZoomButtonPointerOverBorderThemeBrush}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Glyph"
                                                                                   Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SemanticZoomButtonPointerOverForegroundThemeBrush}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                                   Storyboard.TargetProperty="Background">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SemanticZoomButtonPressedBackgroundThemeBrush}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                                   Storyboard.TargetProperty="BorderBrush">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SemanticZoomButtonPressedBorderThemeBrush}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Glyph"
                                                                                   Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SemanticZoomButtonPressedForegroundThemeBrush}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <TextBlock x:Name="Glyph"
                                               Text="&#xE0B8;"
                                               UseLayoutRounding="False"
                                               Margin="0,0,0,1"
                                               HorizontalAlignment="Center"
                                               VerticalAlignment="Center"
                                               Foreground="{ThemeResource SemanticZoomButtonForegroundThemeBrush}"
                                               FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                               FontSize="{ThemeResource SemanticZoomButtonFontSize}"
                                               IsHitTestVisible="False" 
                                               AutomationProperties.AccessibilityView="Raw"/>
                                </Border>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

 

 

Mostrar:
© 2014 Microsoft