1

チェック状態に基づいて背景を変更する必要があるトグル ボタンを備えたアプリケーションがあります。このアプリケーションには、トグル ボタンと同じ背景を共有する通常のボタンもいくつかあります。また、すべて角が丸くなっています。

だから私はこれらのスタイルを思いついた：

<Style TargetType="Button" BasedOn="{StaticResource {x:Type Control}}" x:Key="OnButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="15" Background="{StaticResource GradientBrushOn}" BorderThickness="1" Padding="2">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="Button" BasedOn="{StaticResource OnButton}" x:Key="OffButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="15" Background="{StaticResource GradientBrushOff}" BorderThickness="1" Padding="2" x:Name="TheBorder">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

簡単に言うと、スタイルOffButtonの Background プロパティのみをからに変更するように、スタイルを短くする方法を探しています。OnButtonGradientBrushOnGradientBruthOff

WPF を使用するのはこれが初めてなので、これはかなり基本的なことだと思いますが、Google で 2 時間を費やした後でも、それを行う方法が見つかりませんでした。

4

1 に答える 1

5

使用Button.Background物件とControlTemplate使用中TemplateBinding

<Style TargetType="Button" BasedOn="{StaticResource {x:Type Control}}" x:Key="OnButton">
    <Setter Property="Background" Value="{StaticResource GradientBrushOn}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="15" Background="{TemplateBinding Background}" BorderThickness="1" Padding="2">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="Button" BasedOn="{StaticResource OnButton}" x:Key="OffButton">
    <Setter Property="Background" Value="{StaticResource GradientBrushOff}"/>
</Style>

これは、あなたが行う場合にも機能します

<Button Style="..." Background="Green"/>

編集

通常はテンプレート全体を変更する必要があるため、、、、、、などのControlTemplateコントロールの組み込みプロパティをできるだけ多く利用して、テンプレートを共有し、たとえばスタイルから微調整するだけで済みます。BackgroundBorderBrushBorderThicknessPaddingHorizontalContentAlignmentVerticalContentAlignment

<Style TargetType="Button" BasedOn="{StaticResource {x:Type Control}}" x:Key="OnButton">
   <Setter Property="Background" Value="{StaticResource GradientBrushOn}"/>
   <Setter Property="BorderThickness" Value="1"/>
   <Setter Property="Padding" Value="2"/>
   <Setter Property="HorizontalContentAlignment" Value="Center"/>
   <Setter Property="VerticalContentAlignment" Value="Center"/>
   <Setter Property="Template">
       <Setter.Value>
           <ControlTemplate TargetType="Button">
               <Border CornerRadius="15" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Padding="{TemplateBinding Padding}">
                   <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
               </Border>
           </ControlTemplate>
       </Setter.Value>
   </Setter>
</Style>
于 2016-02-01T14:32:21.313 に答える