1

ボタンのスタイルをよりフラットに変更したかったので、2 つのスタイルを作成しました。最初ToggleButtonは から派生しToolBar.ToggleButtonStyleKey、2 番目Buttonは から派生しToolBar.ButtonStyleKeyます。

それはうまくいきました - ボタンはツールバーのようになり、フラットになりました。私が欲しかった2番目のことはBackground、ユーザーがカーソルをコントロールの上に置いたときにプロパティを透明にすることです。Backgroundこれを実現するために、 to TransparentonIsMouseOverイベントを設定する単純なトリガーを定義しました。では機能しましたToggleButtonが、同じトリガーでは機能しませんでしたButton(背景はまったく影響を受けませんでした)。

このトリガーがなぜうまく機能しToggleButton、機能しないのか誰か知っていButtonますか? 両方のスタイルが同じファミリに属しているため、同じ動作を期待していました。

以下は完全なコードです。

<Window x:Class="WpfButtonsTest.MainWindow"
    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="FlatToggleButton"  TargetType="ToggleButton" 
BasedOn="{StaticResource {x:Static ToolBar.ToggleButtonStyleKey}}">
  <Setter Property="BorderThickness" Value="0"/>
  <Setter Property="Focusable" Value="False"/>
  <Setter Property="Background" Value="Transparent"/>
  <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="Background" Value="Transparent"/>
    </Trigger>
  </Style.Triggers>
</Style>

<Style x:Key="FlatButton"  TargetType="Button" 
BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
  <Setter Property="BorderThickness" Value="0"/>
  <Setter Property="Focusable" Value="False"/>
  <Setter Property="Background" Value="Transparent"/>
  <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="Background" Value="Transparent"/>
    </Trigger>
  </Style.Triggers>
</Style>
 </Window.Resources>
 <Grid>
<StackPanel>
  <ToggleButton Style="{StaticResource FlatToggleButton}">
    I am Toggle Button
  </ToggleButton>

  <Button Style="{StaticResource FlatButton}">
    I am Button
  </Button>
</StackPanel>
  </Grid>
</Window>
4

2 に答える 2

1

Snoop ( WPF を検査するための非常に便利ToolBar.ButtonStyleKeyなプログラム) を使用して見たところ、ベースとして使用しているテンプレートのように見えますBrush。がtrue の場合)。BorderButtonIsMouseOver

ローカル スタイル トリガーは、Button要素の背景を透明に設定する (または、透明に保つ) ことに成功していますが、Border背景は影響を受けないため、強調表示の動作は引き続き表示されます。

ボーダーの背景: ボーダーの背景

ボタンの背景: ボタンの背景

ControlTemplate目的のボタンを取得するには、 a を定義する必要があると思います。これToolBarは、Kaxaml (優れた XAML エディター) に含まれているサンプルの 1 つから取得しました。これは、いくつかのビットが削除されたbasボタンスタイルの合理的な複製であり、Toolbar必要に応じて動作する場合と、目的の動作に応じて微調整する必要がある場合があります。

トリガーをそのまま残しましたIsPressed。削除するか、別のトリガーを追加することをお勧めします。

<Style x:Key="ToolBarButtonBaseStyle" TargetType="{x:Type ButtonBase}">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ButtonBase}">
                <Border 
                    x:Name="Border"  
                    BorderThickness="1"
                    Background="Transparent"
                    BorderBrush="Transparent">
                    <ContentPresenter 
                        Margin="2"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        RecognizesAccessKey="True"/>
                </Border>
                <ControlTemplate.Triggers>
                    <!-- Additional triggers removed, e.g "IsMouseOver" -->
                    <!-- You may not want any at all -->
                    <Trigger Property="IsPressed" Value="true">
                        <Setter TargetName="Border" Property="Background" Value="#E0E0E0" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="#606060" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
于 2013-09-05T21:53:22.720 に答える
0

FlatToggleButtonとFlatButtonの両方のスタイルの背景が既に透明になっていることがわかります 

<Setter Property="Background" Value="Transparent"/>

トリガーがIsMouseOverで起動され、 Backgroundを再びTransparentに設定すると、違いは見られません。

したがって、次のオプションのいずれかを実行する必要があります。

  • 背景が透明以外 のものになるように両方のスタイルを変更します
  • 背景を透明以外に設定するようにトリガーを変更します
于 2013-09-04T22:19:36.300 に答える