在纯XAML中使用ToggleButton更改Grid Visibility属性

时间:2016-05-18 13:23:05

标签: wpf xaml visibility

我有一个名为comSection的网格,我想用ToggleButton设置可见性:

unchecked = collapsed

已检查=可见

Grid和ToggleButton位于DataTemplateListBox

我在尝试访问C#中的可见性方面遇到了很多麻烦:

comSection.Visibility = System.Windows.Visibility.Collapsed; //can't access this way

使用PropertyChangedEventHandler我无法让它工作

所以我想知道是否可以在纯XAML中绑定可见性。也许使用BooleanToVisibilityConverter

编辑我的XAML

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="71*"/>
        <ColumnDefinition Width="580*"/>
    </Grid.ColumnDefinitions>
    <Grid x:Name="IssueList" Grid.Column="1">
        <ListBox x:Name="listBox" MouseDoubleClick="ListBox_MouseDoubleClick" BorderThickness="0,0,0,0" 
             ScrollViewer.HorizontalScrollBarVisibility="Disabled" HorizontalContentAlignment="Stretch" 
             ItemsSource="{Binding Issues, Mode=OneWay}" Grid.Column="1" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid x:Name="grd">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>

                        <!-- Other code here -->


                        <!-- The ToggleButton -->
                        <ToggleButton x:Name="comSecButton" Width="10" Height="10" Click="comSection.Visibility = Collapsed" Background="Transparent" BorderThickness="0"
                                Grid.Column="2" Grid.Row="2" HorizontalAlignment="Left" VerticalAlignment="Bottom"
                                Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}, Path=IsSelected, Converter={StaticResource booleanVisibleConverter}}">

                        </ToggleButton>

                        <!-- The Grid I want to show/hide -->
                        <Grid x:Name="comSection" Visibility="{Binding comSec_Click, Converter={StaticResource booleanVisibleConverter}}" Grid.Column="2" Grid.Row="2">

                            <TextBox x:Name="comment" HorizontalAlignment="Right"
                            Height="23" TextWrapping="Wrap" VerticalAlignment="Bottom" Width="148" />
                        </Grid>

                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

1 个答案:

答案 0 :(得分:2)

在网格样式中使用DataTrigger:

<Grid x:Name="comSection" Grid.Column="2" Grid.Row="2">
    <Grid.Style>
        <Style TargetType="Grid">
            <Setter Property="Visibility" Value="Collapsed"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsChecked, ElementName=comSecButton}"
                             Value="True">
                    <Setter Property="Visibility" Value="Visible"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Grid.Style>
    ...
</Grid>