7

私の WP7 アプリでは、ToggleButton がチェックされた状態のとき、コンテンツの色が反転すると予想されます (ボタンが黒から白に、テキストが白から黒に変わります)。これは、ToggleButton が色の変更を処理するため、コンテンツがテキストの場合にうまく機能します。ただし、これは Patch オブジェクトなどの他のタイプのコンテンツには当てはまりません。ToggleButton のコンテンツを Path オブジェクトに置き換えましたが、色が変わりません (チェック状態の場合、ToggleButton の背景は黒から白に変わり、Path オブジェクトは黒ではなく白のままです)。

最初に、Path オブジェクトの Fill プロパティを親の前景色にバインドしました。しかし、それもうまくいきませんでした。DataTrigger を使用しようとしている可能性がありますが、Silverlight/WP はそれらをサポートしていません。

パス (一時停止記号の描画) を使用するようにテキストを更新しましたが、パスの色がテキストの同じ動作に従いません。理由はありますか？どうすれば修正できますか？

<ToggleButton Grid.Column="0" x:Name="PauseButton">
    <ToggleButton.Content>
        <Path Name="PauseIcon" Fill="White" 
                Data="M0,0 0,27 8,27 8,0z M14,0 14,27 22,27 22,0" />
    </ToggleButton.Content>
</ToggleButton>
4

4 に答える 4

7

使用CheckedとUncheckedイベント:

<ToggleButton Grid.Column="0" x:Name="PauseButton" 
              Background="Black"
              Checked="PauseButton_Checked"
              Unchecked="PauseButton_Unchecked" 
              Style="{DynamicResource ToggleButtonStyle}">
    <Path x:Name="PauseIcon" Fill="White" 
        Data="M0,0 0,27 8,27 8,0z M14,0 14,27 22,27 22,0" />
</ToggleButton>

ToogleButton背景とPath塗りつぶしを適用します。

private void PauseButton_Checked(object sender, RoutedEventArgs e)
{
    (sender as ToggleButton).Background = Brushes.White;
    PauseIcon.Fill = Brushes.Black;
}

private void PauseButton_Unchecked(object sender, RoutedEventArgs e)
{
    (sender as ToggleButton).Background = Brushes.Black;
    PauseIcon.Fill = Brushes.White;
}

カーソルがボタンの上にあるとき、またはボタンが押されたときの動作をToggleButtonStyle無効にするために（必要に応じて）使用されます。Microsoft_Windows_Themes:ButtonChrome

<Style x:Key="ButtonFocusVisual">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Rectangle Stroke="Black" StrokeDashArray="1 2"
                            StrokeThickness="1" Margin="2" 
                            SnapsToDevicePixels="true"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#F3F3F3" Offset="0"/>
    <GradientStop Color="#EBEBEB" Offset="0.5"/>
    <GradientStop Color="#DDDDDD" Offset="0.5"/>
    <GradientStop Color="#CDCDCD" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
<Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
    <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
    <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" SnapsToDevicePixels="true" 
                                                        Background="{TemplateBinding Background}" 
                                                        BorderBrush="{TemplateBinding BorderBrush}" 
                                                        RenderDefaulted="{TemplateBinding Button.IsDefaulted}">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                        Margin="{TemplateBinding Padding}" 
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                        RecognizesAccessKey="True"/>
                </Microsoft_Windows_Themes:ButtonChrome>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="#ADADAD"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
于 2012-06-21T11:33:20.310 に答える
1

テキスト (TextBlock) の動作を定義するスタイルがどこかにあると推測する必要があります。

パスに次のスタイルを使用して、同じことを実現できます。

    <ToggleButton Grid.Column="0" x:Name="PauseButton">
        <ToggleButton.Content>
            <Path Name="PauseIcon" Data="M0,0 0,27 8,27 8,0z M14,0 14,27 22,27 22,0">
                <Path.Style>
                    <Style TargetType="{x:Type Path}">
                        <Setter Property="Fill" Value="White"></Setter>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=PauseButton, Path=IsChecked}" Value="True">
                                <Setter Property="Fill" Value="Black"></Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Path.Style>
            </Path>
        </ToggleButton.Content>
    </ToggleButton>
于 2012-06-19T06:57:34.450 に答える
1

スタイルで VisualStates を使用してみてください。Expression Blend を使用すると非常に簡単に実行できます。

投稿の最後に、コンテンツ プレゼンターが無効になっているときに前景を別の色に設定する私のスタイルの例を示します。

Button と ToggleButton の唯一の違いは、状態を追加してフォアグラウンドを変更する必要がある Toggled-state があることです。状態は次のようになります。

<VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                                                <EasingColorKeyFrame KeyTime="0" Value="#FF7052A8"/>
                                            </ColorAnimationUsingKeyFrames>
                                        <ColorAnimation Duration="0" To="#FFbab0c7" Storyboard.TargetName="contentPresenter"
                                                                        Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" />
                                        </Storyboard>
                                    </VisualState>

これは私のボタンスタイルの例です。独自のものを作成して、ToggleButton に割り当てるだけです。

<Style TargetType="{x:Type Button}">
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <ColorAnimation Duration="0" To="White" Storyboard.TargetName="contentPresenter"
                                                                    Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF532B8C"/>
                                        </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="contentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static HorizontalAlignment.Center}"/>
                                    </ObjectAnimationUsingKeyFrames> 
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                                        <EasingColorKeyFrame KeyTime="0" Value="#FF6137ae"/>
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF7052A8"/>
                                        </ColorAnimationUsingKeyFrames>
                                    <ColorAnimation Duration="0" To="#FFbab0c7" Storyboard.TargetName="contentPresenter"
                                                                    Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Rectangle x:Name="rectangle" Fill="#FF371C69" RadiusX="10" RadiusY="10"/>

                    <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center"/>

                </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsKeyboardFocused" Value="true"/>
                        <Trigger Property="ToggleButton.IsChecked" Value="true"/>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
于 2012-06-21T11:55:15.067 に答える
0

次のことを試してください:

<ToggleButton Grid.Column="0" x:Name="PauseButton">
    <ToggleButton.Content>
        <Path Name="PauseIcon" Fill="{Binding ElementName=PauseButton, Path=Foreground}" 
                Data="M0,0 0,27 8,27 8,0z M14,0 14,27 22,27 22,0" />
    </ToggleButton.Content>
</ToggleButton>

それはうまくいくはずです。

于 2012-06-19T06:47:37.000 に答える