单击按钮时 StackPanel 折叠并可见

Question

我试图在单击按钮时显示一个折叠的堆栈面板，但我遇到了问题，所以我尝试扭转我的想法并且能够折叠一个可见的堆栈面板。但不幸的是我无法实现我想要的行为，在单击按钮时显示折叠的堆栈面板。到代码 :D

XAML

<Button x:Name="sentButton" Content="Add Friend" Style="{DynamicResource FlatButtonStyle}" Margin="493,0,0,0" HorizontalAlignment="Left" Width="106"/>
    <StackPanel Style="{DynamicResource stackCollapsed}" Visibility="Collapsed">
        <Label Content="Invite Friends" FontWeight="Bold" Margin="0,0,477,0" Height="32" />
        <StackPanel Orientation="Horizontal" Margin="26,0,0,0">
            <Label Content="Enter your friend's email" Width="222" Height="25" />
            <TextBox Text="{Binding Email, UpdateSourceTrigger=PropertyChanged}" Style="{DynamicResource MyTextBox}" x:Name="textBoxEmail" Width="298"/>
            <Button x:Name="button1" Content="Send" Command="{Binding AddCommand}" Width="77" Style="{DynamicResource FlatButtonStyle}" Margin="20,0,0,0"/>
        </StackPanel>
    </StackPanel>

样式

<!-- Style Collapsed-->
<Style x:Key="stackCollapsed" TargetType="StackPanel">
    <Style.Triggers>
        <DataTrigger Binding="{Binding ElementName=sentButton,Path=IsPressed}" Value="true">
            <Setter Property="StackPanel.Visibility" Value="Visible"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

Answer 1

而不是 Button 使用 ToggleButton 并通过 BooleanToVisibilityConverter 转换器

将 StackPanel.Visibility 绑定到 ToggleButton.IsChecked 属性

<ToggleButton x:Name="sentButton" Content="Add Friend" Margin="493,0,0,0" HorizontalAlignment="Left" Width="106"/>
<StackPanel Visibility="{Binding ElementName=sentButton, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}">
    <Label Content="Invite Friends" FontWeight="Bold" Margin="0,0,477,0" Height="32" />
    <StackPanel Orientation="Horizontal" Margin="26,0,0,0">
        <Label Content="Enter your friend's email" Width="222" Height="25" />
        <TextBox Text="{Binding Email, UpdateSourceTrigger=PropertyChanged}"  x:Name="textBoxEmail" Width="298"/>
        <Button x:Name="button1" Content="Send" Command="{Binding AddCommand}" Width="77" Margin="20,0,0,0"/>
    </StackPanel>
</StackPanel>

转换器定义如下

<Window.Resources>
    <ResourceDictionary>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
    </ResourceDictionary>
</Window.Resources>

Answer 2

问题是 <StackPanel> 选项卡中的 Visibility 属性比样式或触发器中设置的任何内容都具有更高的优先级，因此永远不会应用触发器。有关详细信息，请参阅 Dependency Property Precedence List。

要修复您当前的解决方案，请将可见性属性移出 <StackPanel> 标签并移至您的样式中，如下所示：

<Style x:Key="stackCollapsed" TargetType="StackPanel">
    <Setter Property="Visibility" Value="Collapsed"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding ElementName=sentButton,Path=IsPressed}" Value="true">
            <Setter Property="Visibility" Value="Visible"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

<StackPanel Style="{DynamicResource stackCollapsed}">
    ...
</StackPanel>

也就是说，我个人会推荐像 StackPanel.Visibility 绑定到 ToggleButton.IsChecked 的切换按钮，例如 .

Answer 3

我解决了将 Children 设置为 null

stackPanel.Children.Clear();

如果您需要第一次显示/隐藏面板，此方法有效，如果您需要运行时，此方法无效

Answer 4

简单如 Stackpanel.Visibility = Visibility.Collapsed.

单击按钮时 StackPanel 折叠并可见

StackPanel Collapsed and Visible on Button Click

c#

wpf

user-interface

styles

mvvm