2010-05-13 11 views
6

Ich habe eine Reihe von Tasten in einem Stack-Panel. Ich möchte, dass alle ein Hintergrundbild haben. Wie kann ich es mit Stilen tun? da ich nicht das Hintergrundbild für jede Taste manuell einstellen möchte.WPF-Hintergrundbild mit Styles einstellen?

ist hier ein Code-Schnipsel:

<StackPanel Orientation="Horizontal" Height="100px" VerticalAlignment="Top"> 
     <StackPanel.Resources> 
      <Style TargetType="Button"> 
       <Setter Property="Margin" Value="2,4" /> 
      </Style> 
     </StackPanel.Resources> 
     <Button Width="127px" Height="79px" VerticalAlignment="Bottom"> 
      <Button.Background> 
       <ImageBrush ImageSource="images/Tab.png" /> 
      </Button.Background> 
     </Button> 
     <Button>A</Button> 
     <Button>R</Button> 
     <Button>S</Button> 
    </StackPanel> 

Dank.

Antwort

14

Nun, Sie geben einen Setter für die Background -Eigenschaft innerhalb des Stils, und Sie legen seinen Wert auf die ImageBrush.

<StackPanel Orientation="Horizontal" Height="100px" VerticalAlignment="Top"> 
     <StackPanel.Resources> 
      <Style TargetType="Button"> 
       <Setter Property="Margin" Value="2,4"/> 
       <Setter Property="Background"> 
        <Setter.Value> 
        <ImageBrush ImageSource="images/Tab.png"/> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </StackPanel.Resources> 

     <Button Width="127px" Height="79px" VerticalAlignment="Bottom"/> 
     <Button>A</Button> 
     <Button>R</Button> 
     <Button>S</Button> 
    </StackPanel> 
1

Unten ist der Stil für die Schaltfläche und backgroung Bild wird auf it.You kann die Quelle des ImageBrush auf den einen ändern, die Sie wollten.

<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"> 
      <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/> 
      <Setter Property="Background" > 
       <Setter.Value> 
        <ImageBrush ImageSource="pic.png"></ImageBrush> 
       </Setter.Value> 
      </Setter> 

      <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/> 
      <Setter Property="BorderThickness" Value="1"/> 
      <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
      <Setter Property="HorizontalContentAlignment" Value="Center"/> 
      <Setter Property="VerticalContentAlignment" Value="Center"/> 
      <Setter Property="Padding" Value="1"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type Button}"> 
         <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true"> 
          <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
         </Microsoft_Windows_Themes:ButtonChrome> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsKeyboardFocused" Value="true"> 
           <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/> 
          </Trigger> 
          <Trigger Property="ToggleButton.IsChecked" Value="true"> 
           <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/> 
          </Trigger> 
          <Trigger Property="IsEnabled" Value="false"> 
           <Setter Property="Foreground" Value="#ADADAD"/> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

Und dann einfach verwenden:

<StackPanel Orientation="Horizontal" Height="100px" VerticalAlignment="Top"> 
     <StackPanel.Resources> 
      <Style TargetType="Button"> 
       <Setter Property="Margin" Value="2,4" /> 
      </Style> 
     </StackPanel.Resources> 
     <Button Width="127px" Height="79px" VerticalAlignment="Bottom" Style="{StaticResource ButtonStyle1}"> 
     </Button> 
     <Button Style="{StaticResource ButtonStyle1}" >A</Button> 
     <Button Style="{StaticResource ButtonStyle1}">R</Button> 
     <Button Style="{StaticResource ButtonStyle1}">S</Button> 
    </StackPanel> 
+0

Infact die Höhe, Breite oder jede Eigenschaft, die Sie es im Stil eines Knopfes eingestellt und dann gelten nur die Art Ihren Knopf – Malcolm