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。

要解决当前的解决方案，移动Visibliity财产出<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，如this answer suggests。