SemanticZoom styles and templates
[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]
This topic describes the styles and templates for the SemanticZoom control. You can modify these resources and the default ControlTemplate to give the control a unique appearance.
Visual states
These are the VisualStates defined in the control's default style.
This table lists the visual states for the semantic zoom.
| VisualState name | VisualStateGroup name | Description |
|---|---|---|
ZoomInView |
SemanticZoomStates |
The zoomed in view is shown. |
ZoomOutView |
SemanticZoomStates |
The zoomed out view is shown. |
ZoomOutButtonVisible |
ZoomOutButtonStates |
The zoom out button is shown. |
ZoomOutButtonHidden |
ZoomOutButtonStates |
The zoom out button is not shown. |
This table lists the visual states for the zoom out button.
| VisualState name | VisualStateGroup name | Description |
|---|---|---|
Normal |
CommonStates |
The default state. |
PointerOver |
CommonStates |
The pointer is positioned over the control. |
Pressed |
CommonStates |
The control is pressed. |
Theme resources
These resources are used in the control's default style.
Dark theme brushes
To change the colors of the control in the dark theme, override these brushes in 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" />
Light theme brushes
To change the colors of the control in the light theme, override these brushes in 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" />
Other resources
<x:Double x:Key="SemanticZoomButtonFontSize">14.667</x:Double>
For more info on theme resources, including the values that are used for the HighContrast theme, see XAML theme resources reference.
Default style
<!-- 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=""
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>