How to add button in listbox in material design in XAML toolkit?

[VahidEra]

Hi guys,
Is there any chance to add button to listbox in material design in XAML toolkit like this?

I have no idea how to do this

[nicolaihenriksen]

@VahidEra This question is not directly related to the MDIX toolkit, but it is a good question, and one that really highlights the flexibility that WPF provides. In WPF, all elements are associated with a template which dictates how the control should be rendered.

So what you want to do here is to change the way a ListBoxItem is rendered, this can be done by overriding the ListBox.ItemContainerStyle and modify it to fit your needs. The code below does so by inheriting from the normal MaterialDesignListBoxItem and then overriding the ContentTemplate on that style to take control of the rendering of the actual content (this means the row highlight and other stuff is retained). In the ContentTemplate it encapsulates the list item content (i.e. the ContentPresenter) inside of a grid where an optional column of buttons can be added if needed. This is not exactly like the example in your question, but hopefully it gives you enough guidance to achieve what you want.

<ListBox>
  <ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem" BasedOn="{StaticResource MaterialDesignListBoxItem}">
      <Setter Property="HorizontalContentAlignment" Value="Stretch" />
      <Setter Property="ContentTemplate">
        <Setter.Value>
          <DataTemplate DataType="{x:Type ContentControl}">
            <Grid>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
              </Grid.ColumnDefinitions>

              <!-- Panel of buttons -->
              <StackPanel Grid.Column="0" Orientation="Horizontal">
                <Button Content="{materialDesign:PackIcon Kind=Settings, Size=12}" Margin="2" Padding="4" Width="20" Height="20" />
                <Button Content="{materialDesign:PackIcon Kind=Github, Size=12}" Margin="2" Padding="4" Width="20" Height="20" />
              </StackPanel>

              <!-- "Normal" cell content -->
              <ContentPresenter Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Content="{TemplateBinding Content}" />
            </Grid>
          </DataTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </ListBox.ItemContainerStyle>
  <TextBlock Text="Plain" />
  <TextBlock Text="Old" />
  <TextBlock Text="ListBox" />
  <TextBlock Text="Full of junk" />
</ListBox>

The result of doing the above, will be something like this:

[VahidEra]

@nicolaihenriksen WOOOOW, Dear Nicolai that is exactly what I wanted. With the path you showed me, I can definitely get better results.
Of course, with your help and this code that you gave me, my need will be solved.
Thank you so much.