web-dev-qa-db-ja.com

WPF無効化ボタンの背景

無効になっているボタンのスタイルを変更しようとしています：

    <Style TargetType="Button" x:Key="MyButton2">
        <Setter Property="Background" Value="MediumAquamarine" />
        <Setter Property="Foreground" Value="MediumBlue" />

        <Style.Triggers>
            <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Background" Value="Green"/>
                <Setter Property="Foreground" Value="DeepPink"/>
            </Trigger>
        </Style.Triggers>

    </Style>

そして私のボタン：

<Button Style="{StaticResource MyButton2}" Content="My text" Width="100" Height="30" IsEnabled="False" />

しかし、何らかの理由で、このスタイルはボタンに適用されません：

enter image description here

このスタイルをボタンに適用するにはどうすればよいですか？そして、スタイルのみでボタンのテンプレートをオーバーライドせずにそれを行うことはできますか？

wpfxamlstyles
24
Junior222

スタイルのみでボタンのテンプレートをオーバーライドせずに実行できますか？

WindowsのコントロールにはデフォルトのStylesとControlTemplatesとWindowsの各バージョンで異なるがあるため、そうではないと思います。さらに、スタイル-それは多くの設定であり、通常、スタイルは制御する振る舞いを変更/追加しません。これはこのControlTemplateを担当します。

Note:スタイルはセッターのセットです。たとえば、背景、サイズなどを設定します。ControlTemplateは、これらの設定がすべて表示されるフォームです。

このような状況では、ControlTemplateを変更することをお勧めします。この場合、システムのバージョンに関係なく、同じ動作（ビューとも呼ばれる）を使用できます。

この場合、次のStyleを試してください：

<Window.Resources>
    <Style TargetType="Button" x:Key="MyButton2">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="Background" Value="MediumAquamarine" />
        <Setter Property="Foreground" Value="MediumBlue" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid Background="{TemplateBinding Background}">
                        <ContentPresenter x:Name="MyContentPresenter" 
                                          Content="{TemplateBinding Content}"
                                          HorizontalAlignment="Center" 
                                          VerticalAlignment="Center" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <Style.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" Value="Green"/>
                <Setter Property="Foreground" Value="DeepPink"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

<Grid x:Name="LayoutRoot">
    <Button Content="Button" 
            IsEnabled="False"
            HorizontalAlignment="Left" 
            VerticalAlignment="Top" 
            Width="75" 
            Style="{StaticResource MyButton2}"
            Click="Button_Click"/>
</Grid>
25
Anatoliy Nikolaev

奇妙なことは、それを実行すると「うまく機能する」ということです。これは、実際にはボタンのテンプレートに当てはまります。これがテンプレート全体のボタンです。

<Style x:Key="FocusVisual">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
    <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
    <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <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}">
                <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                    <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsDefaulted" Value="true">
                        <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                        <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

ご覧のとおり、ボタンのコントロールテンプレートには多くのことが行われています。例では、ctlが無効になっているときに次のSolidColorBrushesが使用されます。

<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>

これらを（ユーザーコントロール、アプリの範囲内で）変更するか、ダニエルウォードの提案に従ってコントロールテンプレートを書き換えることができます。

UIエディターでテンプレートを右クリックして、テンプレートの編集->コピーの作成...ブレンド、コード、または逆アセンブルにより、コントロールのデフォルトテンプレートをダンプできます。

それが役に立てば幸い！

乾杯

スティアン

8
Stígandr

これを行う唯一の方法は、ボタンからchromeテーマを削除することです。これはホバリング/クリックアニメーションも削除することに注意してください。 Windows 7でボタンのグラデーションとして使用する場合

残念なことに、Microsoftは ボタンを無効にすると、バックグラウンドにchromeテーマのコードビハインド のプライベートプロパティからハードコードされた値が与えられるはずです。つまり、 XAMLで変更します。そのリンクは問題を説明しています。

Buttonのコントロールテンプレートは、ButtonChromeというプライベートプロパティを持つButtonOverlayを使用します。これは、ButtonがIsEnabledにFalseに設定されている場合、Backgroundをnew SolidColorBrush(Color.FromRgb(0xf4, 0xf4, 0xf4))（またはRGB 244,244,244）に設定します。これは、表示される灰色です。それを変えることはできません。

できることは、ボタンの新しいコントロールテンプレートを作成し（yay）、Themes:ButtonChrome要素をBorder要素に置き換えて、Backgroundを変更できることです。

デザインビューでは機能していないように見えますが、実行すると機能します。

したがって、たとえば、あなたの場合、次のようになります。

<!-- Default button focus visual -->
<Style x:Key="ButtonFocusVisual">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
    <Setter Property="Background" Value="MediumAquamarine"/>
    <Setter Property="Foreground" Value="MediumBlue"/>
    <Setter Property="BorderBrush" Value="Blue"/>
    <Setter Property="BorderThickness" Value="1"/>
    <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}">
                <Grid>
                    <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="DeepPink"/>
                        <Setter Property="Background" Value="Green"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
2
Daniel Ward

これには遅れるかもしれませんが、WPFによって提供される組み込みプロパティがあります。

IsHitTestVisible="False"

上記のコントロールを使用してマウスを動かすと、実際の外観を変えずにコントロールを無効にすることができます。

1
Ishan Khanna

私の解決策は少し簡単ですが、無効なボタンにTransparent背景色を使用することは許可されず、BorderBrushも変更できません。私がしていることは、ボタンのコンテンツとしてTextBlockを使用し、無効になっているときにこのTextBlock背景の色を変更することです。

私のボタンは次のように書かれています：

<Button>
    <TextBlock Text="Click me!" Style="{StaticResource MyButtonContentStyle}" />
</Button>

そして、MyButtonContentStyleは次のように書かれています。

<Style x:Key="MyButtonContentStyle" TargetType="TextBlock">
    <Style.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Background" Value="White" />
        </Trigger>
    </Style.Triggers>
</Style>

それは私たちにとって魅力的でした。

1
Mohammed Larabi