How make a grid visible in a DataTemplateSelector

Question

I have a DataTemplate of an ItemsControl which contains 2 grids. The second grid is collapsed and I want to make it visible when I click on an item in the ItemsControl.

Here is the XAML:

<ItemsControl.Resources>
   <DataTemplate x:Key="magazineSlotTemplate">
       <Grid>
           <Grid x:Name="buttonGrid">
               <Button Margin="4" Style="{StaticResource TransparentButtonStyle}" Click="ClickEvent">
                   <Grid>
                       <Grid.ColumnDefinitions>
                           <ColumnDefinition Width="Auto"/>
                           <ColumnDefinition Width="Auto"/>
                       </Grid.ColumnDefinitions>
                       <Grid.RowDefinitions>
                           <RowDefinition Height="Auto"/>
                           <RowDefinition Height="Auto"/>
                       </Grid.RowDefinitions>
                       <Path Width="48" Height="48" Fill="{Binding Color, Mode=OneWay}" Grid.RowSpan="2" Data="M24,14z"/>
                       <Ellipse Width="20" Height="20" Fill="{Binding ColorTwo, Mode=OneWay}" Grid.RowSpan="2"/>
                       <Image Width="48" Height="48" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="2" Source="pack://application:,,,/Resources/tool.png"/>
                       <ProgressBar Orientation="Vertical" Width="15" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2"/>
                       <TextBlock Grid.Column="1" Grid.Row="0" Text="24%" FontSize="11">
                           <TextBlock.LayoutTransform>
                               <RotateTransform Angle="-90"/>
                           </TextBlock.LayoutTransform>
                       </TextBlock>
                   </Grid>
               </Button>
           </Grid>

           <Grid x:Name="editGrid" Visibility="Collapsed">
               <Grid x:Name="gridMare">
                   <Grid.RowDefinitions>
                       <RowDefinition Height="Auto"/>
                       <RowDefinition Height="Auto"/>
                   </Grid.RowDefinitions>
                   <Grid Grid.Row="0">
                       <Grid.ColumnDefinitions>
                           <ColumnDefinition Width="Auto"/>
                           <ColumnDefinition Width="*"/>
                       </Grid.ColumnDefinitions>
                       <CheckBox Grid.Column="0" VerticalAlignment="Center" Margin="2,2,2,2" HorizontalAlignment="Center" IsChecked="{Binding IsPresent, Mode=OneWay}" IsEnabled="False">
                           <CheckBox.LayoutTransform>
                               <ScaleTransform ScaleX="1.6" ScaleY="1.6"/>
                           </CheckBox.LayoutTransform>
                       </CheckBox>
                       <ComboBox x:Name="cmb" Grid.Column="1" Margin="2" ItemsSource="{Binding Available, Mode=OneWay}" SelectedValue="{Binding CurrentType}"/>

                   </Grid>

Here is the code behind in which ceControl is a DataTemplateSelector and MagazineSlotTemplate is a DataTemplate which uses a static resource from the above template.

I can see the the second grid in the code behind but when I set the visibility to visible becomes visible but the property IsVisisble is false thus I cannot see the grid

private void ClickEvent(object sender, RoutedEventArgs e)
{
   var template = ceControl.MagazineSlotTemplate.LoadContent() as FrameworkElement;
   var myGrid = (Grid)template.FindName("editGrid");
   myGrid.Visibility = Visibility.Visible;
   var visible = myGrid.IsVisible;
}

Answer 1

You need to get a reference to the actual Grid element that is visible on the screen. You could find it in the visual tree. Try this:

private void ClickEvent(object sender, RoutedEventArgs e)
{
    Button button = sender as Button;
    Grid buttonGrid = button.Parent as Grid;
    if (buttonGrid != null)
    {
        Grid grid = buttonGrid.Parent as Grid;
        if (grid != null)
        {
            Grid editGrid = grid.Children.OfType<Grid>().FirstOrDefault(g => g.Name == "editGrid");
            if (editGrid != null)
            {
                editGrid.Visibility = Visibility.Visible;
            }
        }
    }
}

The DataTemplate.LoadContent() creates new elements and these are not the ones that you see on the screen.