2016-03-23 13 views
0

Ich beginne diese Frage, indem ich sage, dass ich nicht viel Erfahrung mit WPF habe, da ich gerade angefangen habe es zu benutzen (Alle meine bisherigen C# -Erfahrung ist mit Windows Forms und ASP.net).WPF Generischer Stil, der von anderen Styles vererbt werden kann

Lassen Sie uns sagen, dass ich in meinem App.xaml definiert zwei Arten, eine, die eine blaue Taste und eine definiert, die einen roten Knopf definiert:

<Style x:Key="BlueButton" TargetType="Button"> 
    <Setter Property="Foreground" Value="White" /> 
    <Setter Property="Background"> 
     <Setter.Value> 
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
       <GradientStop Color="#FF50D0FF"/> 
       <GradientStop Color="#FF0092C8" Offset="1"/> 
      </LinearGradientBrush> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border CornerRadius="2" Background="{TemplateBinding Background}"> 
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    <Style.Triggers> 
     <Trigger Property="IsPressed" Value="True"> 
      <Setter Property="Background"> 
       <Setter.Value> 
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
         <GradientStop Color="#FF0092C8"/> 
         <GradientStop Color="#FF50D0FF" Offset="1"/> 
        </LinearGradientBrush> 
       </Setter.Value> 
      </Setter> 
     </Trigger> 
    </Style.Triggers> 
</Style> 
<Style x:Key="RedButton" TargetType="Button"> 
    <Setter Property="Foreground" Value="White" /> 
    <Setter Property="Background"> 
     <Setter.Value> 
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
       <GradientStop Color="#FFFFAE00" Offset="0"/> 
       <GradientStop Color="Red" Offset="1"/> 
      </LinearGradientBrush> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border CornerRadius="2" Background="{TemplateBinding Background}"> 
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    <Style.Triggers> 
     <Trigger Property="IsPressed" Value="True"> 
      <Setter Property="Background"> 
       <Setter.Value> 
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
         <GradientStop Color="Red" Offset="0"/> 
         <GradientStop Color="#FFFFAE00" Offset="1"/> 
        </LinearGradientBrush> 
       </Setter.Value> 
      </Setter> 
     </Trigger> 
    </Style.Triggers> 
</Style> 

Wie kann ich diese beiden Stile verschmelzen, um eine allgemeine zu machen Stil, der "beides" enthält?

EDIT:

Dmitriy Polyanskiy Antwort funktioniert, aber ich habe noch jede Eigenschaft jedes Mal, wenn ich einen neuen Stil erstellen möchten einzustellen. Gibt es eine Möglichkeit, so etwas zu tun: <Style x:Key="RedButton" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}" Color1="#FFFFAE00" Color2="Red" />

oder

<Style x:Key="RedButton" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}"> 
    <Setter Property="Color1" Value="#FFFFAE00" /> 
    <Setter Property="Color2" Value="Red" /> 
</Style> 

und dann haben die beiden Verlaufsfarben automatisch eingestellt?

+0

Was meinst du mit zwei Stil verschmelzen? Wie kann man einen Knopf haben, der sowohl blau als auch rot ist? – Nitin

+0

Ich meinte etwas wie einen allgemeinen Stil, so dass ich, wenn ich einen grünen Knopf hinzufügen möchte, es tun kann, ohne alles wieder schreiben zu müssen. – user3807877

+0

Ich denke, Sie suchen nach ['BasedOn'] (https://msdn.microsoft.com/en-us/library/system.windows.style.basedon%28v=vs.110%29.aspx) – Default

Antwort

2

Im Wesentlichen Sie wollen, sind Stile einer ‚parametrisiert‘ Stil basiert weg zu schaffen.

Was Sie tun müssen, ist Ihren Basisstil mit DynamicResources für die Farben des GradientStop zu erstellen. Dann überschreiben Sie in den Stilen, die Sie daraus erstellen, die Ressourcenfarben.

BaseButtonStyle:

<Style x:Key="BaseButtonStyle" TargetType="Button"> 
    <Style.Resources> 
     <Color x:Key="Color1">White</Color> 
     <Color x:Key="Color2">Gray</Color> 
    </Style.Resources> 
    <Setter Property="Foreground" Value="White" /> 
    <Setter Property="Background"> 
     <Setter.Value> 
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
       <GradientStop Color="{DynamicResource Color1}"/> 
       <GradientStop Color="{DynamicResource Color2}" Offset="1"/> 
      </LinearGradientBrush> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border CornerRadius="2" Background="{TemplateBinding Background}"> 
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    <Style.Triggers> 
     <Trigger Property="IsPressed" Value="True"> 
      <Setter Property="Background"> 
       <Setter.Value> 
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
         <GradientStop Color="{DynamicResource Color2}" /> 
         <GradientStop Color="{DynamicResource Color1}" Offset="1" /> 
        </LinearGradientBrush> 
       </Setter.Value> 
      </Setter> 
     </Trigger> 
    </Style.Triggers> 
</Style> 

BasedOn Styles:

<Style x:Key="RedButton" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}"> 
    <Style.Resources> 
     <Color x:Key="Color1">#FFFFAE00</Color> 
     <Color x:Key="Color2">Red</Color> 
    </Style.Resources> 
</Style> 
<Style x:Key="BlueButton" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}"> 
    <Style.Resources> 
     <Color x:Key="Color1">#FF50D0FF</Color> 
     <Color x:Key="Color2">#FF0092C8</Color> 
    </Style.Resources> 
</Style> 
<Style x:Key="GreenButton" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}"> 
    <Style.Resources> 
     <Color x:Key="Color1">Green</Color> 
     <Color x:Key="Color2">LightGreen</Color> 
    </Style.Resources> 
</Style> 
<Style x:Key="PurpleYellowButton" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}"> 
    <Style.Resources> 
     <Color x:Key="Color1">Purple</Color> 
     <Color x:Key="Color2">Yellow</Color> 
    </Style.Resources> 
</Style> 

Screenshot eines Stackpanel von Schaltflächen: enter image description here

0

Ich habe gerade ein schnelles Beispiel für Sie erstellt, um Ihnen zu zeigen, wie das geht. Sie sollten den Basisstil mit gemeinsamen Eigenschaften beschreiben. Und dann benutzen Sie einfach BaseOn = {Static BaseStyle}

<Style x:Key="BaseButtonStyle" TargetType="Button"> 
    <Setter Property="Foreground" Value="White" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border 
        CornerRadius="2" 
        Background="{TemplateBinding Background}"> 
        <ContentPresenter 
         HorizontalAlignment="Center" 
         VerticalAlignment="Center"/> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 


<Style x:Key="RedButton" TargetType="Button" 
     BasedOn="{StaticResource BaseButtonStyle}"> 
    <Setter Property="Background"> 
     <Setter.Value> 
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
       <GradientStop Color="#FFFFAE00" Offset="0"/> 
       <GradientStop Color="Red" Offset="1"/> 
      </LinearGradientBrush> 
     </Setter.Value> 
    </Setter> 
    <Style.Triggers> 
     <Trigger Property="IsPressed" Value="True"> 
      <Setter Property="Background"> 
       <Setter.Value> 
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
         <GradientStop Color="Red" Offset="0"/> 
         <GradientStop Color="#FFFFAE00" Offset="1"/> 
        </LinearGradientBrush> 
       </Setter.Value> 
      </Setter> 
     </Trigger> 
    </Style.Triggers> 
</Style> 
0

Eine Möglichkeit, dies zu erreichen, ist, einen Stil zu definieren und anstelle von Gradienten im Stil selbst geben können Sie Dynamic verwenden wie unten. Und dann können Sie für jede Schaltfläche die lokale Ressource LinearGradientBrush definieren und dort Ihre Farben festlegen.

<Window x:Class="" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525"> 
    <Window.Resources> 
     <Style x:Key="BaseButtonStyle" TargetType="Button"> 
      <Setter Property="Foreground" Value="White" /> 
      <Setter Property="Background" Value="{DynamicResource GradientBrushNormal}"> 
      </Setter> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type Button}"> 
         <Border CornerRadius="2" Background="{TemplateBinding Background}"> 
          <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
      <Style.Triggers> 
       <Trigger Property="IsPressed" Value="True"> 
        <Setter Property="Background" Value="{DynamicResource GradientBrushPressed}"> 
        </Setter> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Window.Resources> 
    <StackPanel> 
     <Button Style="{StaticResource BaseButtonStyle}" Content="Blue Button"> 
      <Button.Resources> 
       <LinearGradientBrush x:Key="GradientBrushPressed" EndPoint="0.5,1" StartPoint="0.5,0"> 
        <GradientStop Color="#FF0092C8"/> 
        <GradientStop Color="#FF50D0FF" Offset="1"/> 
       </LinearGradientBrush> 
       <LinearGradientBrush x:Key="GradientBrushNormal" EndPoint="0.5,1" StartPoint="0.5,0"> 
        <GradientStop Color="#FF50D0FF"/> 
        <GradientStop Color="#FF0092C8" Offset="1"/> 
       </LinearGradientBrush> 
      </Button.Resources> 
     </Button> 
     <Button Style="{StaticResource BaseButtonStyle}" Content="Red Button"> 
      <Button.Resources> 
       <LinearGradientBrush x:Key="GradientBrushPressed" EndPoint="0.5,1" StartPoint="0.5,0"> 
        <GradientStop Color="Red" Offset="0"/> 
        <GradientStop Color="#FFFFAE00" Offset="1"/> 
       </LinearGradientBrush> 
       <LinearGradientBrush x:Key="GradientBrushNormal" EndPoint="0.5,1" StartPoint="0.5,0"> 
        <GradientStop Color="#FFFFAE00" Offset="0"/> 
        <GradientStop Color="Red" Offset="1"/> 
       </LinearGradientBrush> 
      </Button.Resources> 
     </Button> 
    </StackPanel> 
</Window>