Как определить стиль прямоугольника в xaml?

Question

Я бы хотел избежать повторения тега «Rectangle» и «VisualStateManager.VisualStateGroups» в обоих режимах «ZoomInButton» и «ZoomOutButton». Как мне это сделать?

Я попытался определить стиль с 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> 

Answer 1

Общий стиль для обеих кнопок, как правило, связывают Source свойство Image, к Content свойству кнопки с 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" .../> 

---

Если вам нужно установить свойство Content в коде позади, установите атрибут x:Name на кнопке

<Button x:Name="zoomInButton" .../> 

и использовать его в коде следующим образом:

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