How to define a rectangle style in xaml? - xaml

Question

I'd like to avoid the repetition of the tag "Rectangle" and "VisualStateManager.VisualStateGroups" in both style "ZoomInButton" and "ZoomOutButton". How can I do it?
I tried to define a Style with targetType = "Button" but it didn't work.
Is there another way?
<Style x:Key="ZoomInButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="pr7">
<StackPanel>
<Image Source="/Images/zoomIn.png" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0.8"/>
</StackPanel>
<Rectangle
x:Name="fvw"
Margin="0"
Stretch="Fill"
IsHitTestVisible="False"
Stroke="White"
StrokeDashArray="1,5"
Opacity="0"
/>
<Rectangle
x:Name="fvb"
Margin="0"
Stretch="Fill"
IsHitTestVisible="False"
Stroke="Black"
StrokeDashArray="1,1"
Opacity="0"
/>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="prova">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="fvw"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0"/>
<DoubleAnimation
Storyboard.TargetName="fvb"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ZoomOutButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="pr6">
<StackPanel>
<Image Source="/Images/zoomOut.png" Opacity="0.8"/>
</StackPanel>
<Rectangle
x:Name="fvw"
Margin="0"
Stretch="Fill"
IsHitTestVisible="False"
Stroke="White"
StrokeDashArray="1,5"
Opacity="0"
/>
<Rectangle
x:Name="fvb"
Margin="0"
Stretch="Fill"
IsHitTestVisible="False"
Stroke="Black"
StrokeDashArray="1,1"
Opacity="0"
/>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="prova">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="fvw"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0"/>
<DoubleAnimation
Storyboard.TargetName="fvb"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 1

A common Style for both Buttons would typically bind the Image's Source property to the Content property of the Button with a TemplateBinding:
<Style x:Key="ZoomButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="pr7">
<StackPanel>
<Image Source="{TemplateBinding Content}" .../>
</StackPanel>
<Rectangle x:Name="fvw" ... />
<Rectangle x:Name="fvb" ... />
<VisualStateManager.VisualStateGroups>
...
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You would use it like this:
<Button Style="{StaticResource ZoomButton}" Content="/Images/zoomIn.png" .../>
<Button Style="{StaticResource ZoomButton}" Content="/Images/zoomOut.png" .../>
If you need to set the Content property in code behind, set the x:Name attribute on the Button
<Button x:Name="zoomInButton" .../>
and use it in code like this:
Uri imageUri = new Uri("ms-appx:///Images/zoomIn.png"); // or similar
zoomInButton.Content = new BitmapImage(imageUri);