0

この質問は、WPF を使い始めたばかりなので、WPF の使用経験があまりないということから始めます (以前の C# の経験はすべて、Windows フォームと ASP.net に関するものです)。

App.xaml に 2 つのスタイルが定義されているとします。1 つは青色のボタンを定義し、もう 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 つのスタイルをマージして、「両方を含む」一般的なスタイルを作成するにはどうすればよいですか?

編集：

Dmitriy Polyanskiy の答えは機能しますが、新しいスタイルを作成するたびにすべてのプロパティを設定する必要があります。このようなことをする方法はありますか：<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>

その後、2 つのグラデーション カラーが自動的に設定されますか?

4

3 に答える 3

2

基本的に、作成したいのは、「パラメータ化された」スタイルに基づくスタイルです。

必要なことは、GradientStop の色に DynamicResources を使用して基本スタイルを作成することです。次に、それに基づくスタイルで、リソースの色をオーバーライドします。

ベースボタンスタイル:

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

ベースのスタイル:

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

ボタンのスタックパネルのスクリーンショット: ここに画像の説明を入力

于 2016-03-23T14:50:31.053 に答える
0

これを実現する 1 つの方法は、スタイルを定義することです。スタイル自体にグラデーションを与える代わりに、以下のように 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>
于 2016-03-23T11:56:19.993 に答える
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>
于 2016-03-23T10:14:46.530 に答える