2016-03-23 10 views
0

WPFを使用し始めたばかりの経験がないと言ってこの質問を開始します(これまでのC#の経験はすべてWindows FormsとASP.netです)。WPF他のスタイルに継承できる汎用スタイル

のは、私は私のApp.xamlで定義された2つのスタイル、赤いボタンを定義するブルーのボタンと1を定義するものを持っているとしましょう:

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

私は一般的に行うために、これらの2つのスタイルをマージすることができますどのように"両方を含む"スタイル?

EDIT:

ドミトリPolyanskiyの答えは動作しますが、私はまだすべてのプロパティに私は新しいスタイルを作成するたびに設定する必要があります。 2つのグラデーションの色が自動的に<Style x:Key="RedButton" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}" Color1="#FFFFAE00" Color2="Red" />

または

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

とを設定していますこのような何かを行う方法はありますか?

+0

あなたがすることによって2つのスタイルをマージ何を意味するのですか?あなたは青と赤の両方のボタンをどうやって持てますか? – Nitin

+0

私は一般的なスタイルを持っているようなものなので、緑のボタンを追加したい場合は、すべてをもう一度書き込む必要はありません。 – user3807877

+0

あなたは['BasedOn'](https://msdn.microsoft.com/en-us/library/system.windows.style.basedon%28v=vs.110%29.aspx)を探していると思います – Default

答えて

2

基本的に、「パラメータ化」スタイルに基づいてスタイルを作成したいとします。

GradientStopの色にDynamicResourcesを使用してベーススタイルを作成するだけです。次に、それを基にしたスタイルで、リソースの色をオーバーライドします。

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スタイル:ボタンのStackPanelのの

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

スクリーンショット: enter image description here

0

私はあなたにそれを行う方法を示す簡単な例を作成しました。共通のプロパティを持つ基本スタイルを記述する必要があります。そして、これを実現するだけで使用BaseOn = {StaticResource 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

一つの方法は、あなたが以下のようにDynamicResource使用することができますスタイル自体に勾配を与えるスタイルとの代わりを定義することです。次に、ボタンごとにローカルリソースLinearGradientBrushを定義して、そこに色を設定して設定します。

<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> 
関連する問題