Question

现在我有一个ToggleButton样式，然后我将Chrome.Visibility = Visibility.Hidden设置为ToggleButton hiddened，但事实并非如此。

我使用了窥探，找出ToggleButton's Visibility 可见。如何更改样式中的ToggleButton's可见性？

这是风格：

 <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}">
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="go">
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                           Storyboard.TargetName="grid">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.5"
                                                        Value="{x:Static Visibility.Collapsed}" />
                            </ObjectAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
                                                           Storyboard.TargetName="grid">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                                      Value="720" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
                                                           Storyboard.TargetName="grid">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                                      Value="0.15" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
                                                           Storyboard.TargetName="grid">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                                      Value="0.15" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <Grid x:Name="grid"
                          RenderTransformOrigin="0.5,0.5">
                        <Grid.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform />
                                <SkewTransform />
                                <RotateTransform />
                                <TranslateTransform />
                            </TransformGroup>
                        </Grid.RenderTransform>
                        <Border x:Name="Chrome"
                                BorderThickness="5"
                                CornerRadius="10"
                                BorderBrush="#FFD7FF25"
                                Grid.ColumnSpan="2">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              Margin="{TemplateBinding Padding}"
                                              RecognizesAccessKey="True"
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Border>
                        <Button x:Name="button"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Top"
                                Height="16.333"
                                Width="Auto"
                                Background="#FFD7FF25"
                                Foreground="#FFFF0B0B"
                                HorizontalContentAlignment="Center"
                                VerticalContentAlignment="Center"
                                BorderBrush="#FFD7FF25"
                                Padding="0,-6,0,0"
                                FontSize="16"
                                Margin="0,-4.167,-3.334,0"
                                Content="x"
                                Focusable="False"
                                Visibility="Collapsed"
                                Click="Button_OnClick"
                                BorderThickness="1" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver"
                                 Value="True"
                                 SourceName="grid">
                            <Setter Property="Visibility"
                                    TargetName="button"
                                    Value="Visible" />
                            <Setter Property="BorderBrush"
                                    TargetName="Chrome"
                                    Value="#FF4DFF25" />
                            <Setter Property="BorderBrush"
                                    TargetName="button"
                                    Value="#FF4DFF25" />
                            <Setter Property="Background"
                                    TargetName="button"
                                    Value="#FF4DFF25" />
                        </Trigger>
                        <EventTrigger RoutedEvent="ButtonBase.Click"
                                      SourceName="button">
                            <BeginStoryboard x:Name="go_BeginStoryboard"
                                             Storyboard="{StaticResource go}" />
                        </EventTrigger>
                        <Trigger Property="IsChecked"
                                 Value="true">
                            <Setter Property="BorderBrush"
                                    TargetName="Chrome"
                                    Value="Red" />
                        </Trigger>
                        <Trigger Property="IsEnabled"
                                 Value="false">
                            <Setter Property="Foreground"
                                    Value="#ADADAD" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

当您使用鼠标时，ToggleButton会显示Button X，点击它，此ToggleButton将消失。

Note: 将ToggleButton放在一个WrapPanel中，您可以在WrapPanel前面看一个空白。< / p>

Answer 1

您可以像这样添加可见性设置器。

 <Style TargetType="Button" x:Key="hello" >
        <Setter Property="Visibility" Value="Visible">

        </Setter>
    </Style>

在这样的任何按钮上使用thi ..

<Button Style="{Binding Source={StaticResource hello}}" Width="100" Background="Red" Height="100" />

希望这有助于...查询下面的plz评论..

Answer 2

如果我理解正确，动画可以正常工作，ToggleButton就会消失。但是你希望他从面板中消失（WrapPanel）释放出来的地方，相邻的元素让他感动。

您的示例不起作用，因为在动画中指定了Grid：

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="grid">
     <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>

他们，正如我们所知，好消失了。在物理上，ToggleButton仍然在记忆中，所以你只是隐藏在Grid中，所以你可以看到它的空白区域。

你必须为所有ToggleButtons制作动画，然后它将会消失并且不会留空空间。也就是说，在属性TargetName中指定自己ToggleButton。一个简单的例子：

    <WrapPanel MinWidth="100" Width="200">
        <WrapPanel.Triggers>
            <EventTrigger RoutedEvent="Button.Click" SourceName="MyButton1">
                <BeginStoryboard>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="MyButton1">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Collapsed}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>

            <EventTrigger RoutedEvent="Button.Click" SourceName="MyButton2">
                <BeginStoryboard>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="MyButton2">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Collapsed}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>

            <EventTrigger RoutedEvent="Button.Click" SourceName="MyButton3">
                <BeginStoryboard>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="MyButton3">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Collapsed}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </WrapPanel.Triggers>

        <ToggleButton Name="MyButton1" Style="{StaticResource ToggleButtonStyle}" Width="30" Height="30" />
        <ToggleButton Name="MyButton2" Style="{StaticResource ToggleButtonStyle}" Width="30" Height="30" />
        <ToggleButton Name="MyButton3" Style="{StaticResource ToggleButtonStyle}" Width="30" Height="30" />            
    </WrapPanel>

WPF风格，可见性

2 个答案: