CODEWITHSUNDEEP
wpfxamlvisibility
Babuh
Babuh

Reputation: 15

Change Grid Visibility property with ToggleButton in pure XAML

I have a Grid named comSection which i want to set the visibility with a ToggleButton :

unchecked = collapsed

checked = visible

The Grid and the ToggleButton are inside a DataTemplate and a ListBox

I had a lot of trouble trying to access the visibility in C# :

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

Using PropertyChangedEventHandler i can't get it to work

So i wonder if it is possible to bind visibility in pure XAML. Maybe using BooleanToVisibilityConverter.

EDIT My 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>

Upvotes: 0

Views: 1863

Answers (1)

Clemens
Clemens

Reputation: 128146

Use a DataTrigger in a Style for the Grid:

<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>

Upvotes: 3

Related Questions