C# WPF change grid visibility if combobox item is selected

Question

I'm trying to display a Grid and its contents when an item (anyone) in combobox is selected. If nothing is selected, grid will remain hidden.

XAML

    <ComboBox x:Name="cb" HorizontalAlignment="Left" VerticalAlignment="Top" Width="140" Height="25"/>
    <Grid x:Name="gr" Visibility="Hidden">
            <Border BorderThickness="1" HorizontalAlignment="Left" Height="600"  VerticalAlignment="Top" Width="346">
                <Border  BorderThickness="1" RenderTransformOrigin="0.5,0.5">
            </Border>
    </Grid>

I've tried with this:

XAML.CS

public void ChangeVisibility(ComboBox cb, Grid gr)
    {
        if (cb.SelectedItem != null)
        {
            gr.Visibility = Visibility.Visible;
        }
        else
        {
            gr.Visibility = Visibility.Hidden;
        }

But it doesn't change anything. I've tried in multiple ways, even with string.IsNullOrEmpty . Source of combobox is a List<string> .

EDIT

Method is called here

public MainWindow()
        {
            InitializeComponent();
            WindowStartupLocation = WindowStartupLocation.CenterScreen;
            ChangeVisibility(cb, gr);
        }

Answer 1

 <ComboBox x:Name="cb" HorizontalAlignment="Left" VerticalAlignment="Top" Width="140" Height="25"/>
    <Grid x:Name="gr">
        <Grid.Style>
            <Style TargetType="Grid">
                <Setter Property="Visibility" Value="Visible"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=cb, Path=SelectedItem}" Value="{x:Null}">
                        <Setter Property="Visibility" Value="Collapsed"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Grid.Style>
        <Border BorderThickness="1" HorizontalAlignment="Left" Height="600"  VerticalAlignment="Top" Width="346">
            <Border  BorderThickness="1" RenderTransformOrigin="0.5,0.5">
            </Border>
    </Grid>

Answer 2

Try with

MainWindow.xaml.cs

private void ComboBox_Selected(object sender, RoutedEventArgs e)
{
    var item = Combo.SelectedItem as ComboBoxItem;
    if (item.Content.ToString() == "Visible")
    {
        RedGrid.Visibility = System.Windows.Visibility.Visible;
    }
    else

    {
        RedGrid.Visibility = System.Windows.Visibility.Hidden;
    }
}

MainWindow.xaml:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition />
    </Grid.RowDefinitions>
    <ComboBox Name="Combo" SelectionChanged="ComboBox_Selected">
        <ComboBoxItem Content="Visible" />
        <ComboBoxItem Content="Hidden" />
    </ComboBox>
    <Grid Name="RedGrid" Grid.Row="1" Background="Red">

    </Grid>
</Grid>

Or to be more similar to your problem:

MainWindow.xaml.cs:

private void ComboBox_Selected(object sender, RoutedEventArgs e)
{
    var item = Combo.SelectedItem as ComboBoxItem;
    if (item != null)
    {
        RedGrid.Visibility = System.Windows.Visibility.Visible;
    }
}

MainWindow.xaml:

<ComboBox Name="Combo" SelectionChanged="ComboBox_Selected" >
    <ComboBoxItem Content="Element 1" />
    <ComboBoxItem Content="Element 2" />
</ComboBox>
<Grid Name="RedGrid" Grid.Row="1" Background="Red" Visibility="Hidden">

</Grid>

But I am not sure, that your approach is correct. You cannot easily deselect item in ComboBox so basically if you select anything Grid will be always visible. I will rather chose solution with multiple ComboBoxItem where one of them will be "none", "hide" or sth like that.

You can always think about MVVM pattern which is very popular with WPF framework