如何在xaml中定义矩形样式？

我希望避免在样式ZoomInButton和ZoomOutButton中重复标记矩形和VisualStateManager.VisualStateGroups。我怎么做

我试图用targetType=Button定义一个样式，但没有成功。 还有别的办法吗

<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>

---

两个按钮的通用样式通常使用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>

并在如下代码中使用它：

<Button Style="{StaticResource ZoomButton}" Content="/Images/zoomIn.png" .../>
<Button Style="{StaticResource ZoomButton}" Content="/Images/zoomOut.png" .../>

Uri imageUri = new Uri("ms-appx:///Images/zoomIn.png"); // or similar
zoomInButton.Content = new BitmapImage(imageUri);

Uri imageUri = new Uri("ms-appx:///Images/zoomIn.png"); // or similar
zoomInButton.Content = new BitmapImage(imageUri);