C# Wpf Type of panel

Question

Hi, I'd like to achieve the result in the image but idk what type of grid I should use. I tried using grid but I can't add element to it from code. What should I use? List box? ListView? Data grid?

I'm using c# wpf .net 5.0

Answer 1

Hi,@Techttv. Welcome Microsoft Q&A. If TreeView is what you want, you could refer to the following code. Please let me know if you have any more questions.

<Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    <Window.Resources>
        <Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
            <Setter Property="Focusable" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Ellipse x:Name="image" Width="10" Height="10" Fill="gray" />
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="true">
                                <Setter TargetName="image" Property="Fill" Value=" White" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

      
        <Style x:Key="{x:Type TreeViewItem}" TargetType="{x:Type TreeViewItem}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Padding" Value="1,0,0,0"/>
            <Setter Property="IsExpanded" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TreeViewItem}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition MinWidth="19" Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>

                            <ToggleButton Margin="-1,0,0,0" x:Name="Expander" Style="{DynamicResource ExpandCollapseToggleStyle}" 
                                          IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/>
                            <Border Name="Bd" Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                                <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" MinWidth="20"/>
                            </Border>
                            <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>
                        </Grid>
                        <ControlTemplate.Triggers>


                            <Trigger Property="IsExpanded" Value="false">
                                <Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed"/>
                            </Trigger>
                            <Trigger Property="HasItems" Value="false">
                                <Setter TargetName="Expander" Property="Visibility" Value="Hidden"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="HasHeader" Value="false"/>
                                    <Condition Property="Width" Value="Auto"/>
                                </MultiTrigger.Conditions>
                                <Setter TargetName="PART_Header" Property="MinWidth" Value="75"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="HasHeader" Value="false"/>
                                    <Condition Property="Height" Value="Auto"/>
                                </MultiTrigger.Conditions>
                                <Setter TargetName="PART_Header" Property="MinHeight" Value="19"/>
                            </MultiTrigger>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="IsSelectionActive" Value="false"/>
                                </MultiTrigger.Conditions>
                                <Setter TargetName="Bd" Property="Background" Value="Green"/>
                                <Setter Property="Foreground" Value="White"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <HierarchicalDataTemplate x:Key="d"  DataType="{x:Type TreeViewItem}">
            <Grid Width="100">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="7*"/>
                    <ColumnDefinition Width="3*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Name}" />
                <Image Grid.Column="1" Source="{Binding Status}" Margin="3,2,0,0" Width="20" Height="20"/>
            </Grid>
        </HierarchicalDataTemplate>

  </Window.Resources>
<Grid>

  <TreeView Background="LightGreen" >

                <TreeViewItem Header="Tavolo1">
                
                    <TreeViewItem Header="Primo" ItemsSource="{Binding Datas}" ItemTemplate="{StaticResource d}">

                </TreeViewItem>
                <TreeViewItem Header="Secondo" ItemsSource="{Binding Datas2}" ItemTemplate="{StaticResource d}">
                    
                    </TreeViewItem>
                </TreeViewItem>
           

        </TreeView>

</Grid>

Codebehind:

public class ViewModel
    {
        
        public ObservableCollection<Data> Datas { get; set; } = new ObservableCollection<Data>();
        public ObservableCollection<Data> Datas2 { get; set; } = new ObservableCollection<Data>();
        public ViewModel()
        {
            Datas = new ObservableCollection<Data>()
                    { new Data() { Name = "Boccolotti", Status = "C:\\...\\warning.jpg" },
                        new Data() { Name = "Linguine", Status = "C:\\...\\green ball.jpg" }
                    } ;
            Datas2 = new ObservableCollection<Data>()
                    { new Data() { Name = "Carne", Status = "C:\\...\\warning.jpg" },
                        new Data() { Name = "Insalata", Status = "C:\\...\\green ball.jpg" },
                        new Data() { Name = "Tagliata", Status = "C:\\...\\green ball.jpg" }
                    } ;
         }
}

 public class Data
    {
        public string Name { get; set; }
        public string Status { get; set; }
    }

The result:

---

If the response is helpful, please click "Accept Answer" and upvote it. Note: Please follow the steps in our [documentation][5] to enable e-mail notifications if you want to receive the related email notification for this thread. [5]: https://docs.microsoft.com/en-us/answers/articles/67444/email-notifications.html