9

ウィンドウにToggleButtonがあり、ResourceDictionaryでスタイルが設定されています。ResourceDictionaryに含まれている理由は、同じ外観にする必要のあるToggleButtonがすぐに複数あるためです。

<Style x:Key="Standardbutton" TargetType="{x:Type ToggleButton}">
    <Setter Property="FontSize" Value="18" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Background">
        <Setter.Value>
            <ImageBrush ImageSource="Resources/Standard_Button_Normal.png" />
        </Setter.Value>
    </Setter>
    <Setter Property="Height" Value="56" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border Name="border" BorderThickness="0" Padding="0,0" BorderBrush="DarkGray" CornerRadius="0" Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center" Name="content" Margin="15,0,0,0"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Background">
                            <Setter.Value>
                                <ImageBrush ImageSource="Resources/Standard_Button_Pressed.png" />
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Foreground">
                            <Setter.Value>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FFF9CE7B" Offset="0"/>
                                    <GradientStop Color="#FFE88C41" Offset="1"/>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

これで、このToggleButtonスタイルにはデフォルトの背景があり、「IsChecked」がtrueの場合、背景も異なります（上記のXAMLコードで確認できます）。

ここで行ったように、これらのトグルボタンにはアイコンとテキストを組み合わせる必要があります（私の不完全なXAMLコードについては申し訳ありません）

<ToggleButton Style="{DynamicResource Standardbutton}" Margin="0,0,0,4">
    <StackPanel Orientation="Horizontal">
        <Image Source="Resources/scan_26x26.png" />
        <TextBlock Text="Scan"/>
    </StackPanel>
</ToggleButton>

問題は、ToggleButtonがチェックされている（IsChecked = True）ときに別のアイコンを使用するにはどうすればよいですか？

質問を理解するのに役立つかもしれないいくつかの画像があります

通常のToggleButtonスタイル
ここに画像の説明を入力してください
IsChecked=Trueスタイル
ここに画像の説明を入力してください
私のデザイン目標は、IsChecked=Trueのときに別のアイコンを使用することです。
ここに画像の説明を入力してください

4

1 に答える 1

13

両方の画像をコントロールテンプレートに追加し、それらのVisibilityプロパティをプロパティにバインドしIsCheckedます（を使用しIValueConverterてtrue / falseから適切なVisibility列挙値に変換します）。

<ToggleButton Style="{DynamicResource Standardbutton}" Margin="0,0,0,4">
    <StackPanel Orientation="Horizontal">
        <Image Source="Resources/scan_26x26.png" 
               Visibility="{Binding 
                  RelativeSource={RelativeSource AncestorType=ToggleButton},
                  Path=IsChecked,
                  Converter={StaticResource BoolToVisibleConverter}}" />
        <Image Source="Resources/anotherimage.png" 
                  Visibility="{Binding 
                     RelativeSource={RelativeSource AncestorType=ToggleButton},
                     Path=IsChecked,
                     Converter={StaticResource BoolToCollapsedConverter}}" />
        <TextBlock Text="Scan"/>
    </StackPanel>
</ToggleButton>

私は2つのコンバーターBoolToVisibleConverterとを使用しましたが、同じことを達成するためにをBoolToCollapsedConverter使用することもできます。ConverterParameter

于 2012-09-14T01:48:47.473 に答える