ItemControl background for child control

Question

In my WPF application, I have added ItemControl and I set the background color in it. How do I set the parent background color only for child control without showing any background color in the parent? I have added a sample code and screen here.

<ItemsControl x:Name="MyItems" ItemsSource="{Binding Categories}" Background="Blue">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
             <WrapPanel Orientation="Horizontal" VerticalAlignment="Top" Width="{Binding ElementName=Grid, Path=ActualWidth}" Margin="0,0,0,20"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="10,10,10,10">
                <Button Width="150" Height="120" HorizontalAlignment="Left" VerticalAlignment="Top" CommandParameter="{Binding CategoryId}" >
                    <TextBlock Text="{Binding CategoryName}" TextWrapping="Wrap" TextAlignment="Center" Margin="10"/>
                </Button>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Answer 1

Hi, you can use the same Style-resource for Background in DataTemplate and in other regions, lik ein following demo:

<Window x:Class="Window021"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
        xmlns:local="clr-namespace:WpfApp1.WpfApp021"  
        mc:Ignorable="d"  
        Title="Window021" Height="450" Width="815">  
  <Window.DataContext>  
    <local:ViewModel/>  
  </Window.DataContext>  
  <Window.Resources>  
    <Style x:Key="BG" TargetType="Panel">  
      <Setter Property="Background" Value="Red"/>  
    </Style>  
  </Window.Resources>  
  <Grid Style="{StaticResource BG}">  
    <ScrollViewer x:Name="Grid" >  
      <ItemsControl ItemsSource="{Binding Categories}" Background="Green" Margin="50">  
        <ItemsControl.ItemsPanel>  
          <ItemsPanelTemplate>  
            <WrapPanel Orientation="Horizontal" VerticalAlignment="Top" Width="{Binding ElementName=Grid, Path=ActualWidth}" Margin="0,0,0,20"/>  
          </ItemsPanelTemplate>  
        </ItemsControl.ItemsPanel>  
        <ItemsControl.ItemTemplate>  
          <DataTemplate>  
            <StackPanel Margin="10" Style="{StaticResource BG}">  
              <Button Width="150" Height="120" HorizontalAlignment="Left"  
                      VerticalAlignment="Top" CommandParameter="{Binding CategoryId}"  
                      Background="Transparent">  
                <TextBlock Text="{Binding CategoryName}" TextWrapping="Wrap" TextAlignment="Center" Margin="10"/>  
              </Button>  
            </StackPanel>  
          </DataTemplate>  
        </ItemsControl.ItemTemplate>  
      </ItemsControl>  
    </ScrollViewer>  
  </Grid>  

Answer 2

Hi, if you want the whole transparency set windows properties like in following demo:

<Window x:Class="Window021"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
        xmlns:local="clr-namespace:WpfApp1.WpfApp021"  
        mc:Ignorable="d"  
        Title="Window021" Height="450" Width="815"  
        Background="Transparent" AllowsTransparency="True" WindowStyle="None">  
  <Window.DataContext>  
    <local:ViewModel/>  
  </Window.DataContext>  
  <Window.Resources>  
    <Style x:Key="BG" TargetType="Panel">  
      <Setter Property="Background" Value="Red"/>  
    </Style>  
  </Window.Resources>  
  <Grid Background="Transparent">  
    <ScrollViewer x:Name="Grid" >  
      <ItemsControl ItemsSource="{Binding Categories}" Margin="50" Background="Transparent">  
        <ItemsControl.ItemsPanel>  
          <ItemsPanelTemplate>  
            <WrapPanel Orientation="Horizontal" VerticalAlignment="Top" Width="{Binding ElementName=Grid, Path=ActualWidth}" Margin="0,0,0,20"/>  
          </ItemsPanelTemplate>  
        </ItemsControl.ItemsPanel>  
        <ItemsControl.ItemTemplate>  
          <DataTemplate>  
            <StackPanel Margin="10" Style="{StaticResource BG}">  
              <Button Width="150" Height="120" HorizontalAlignment="Left"  
                      VerticalAlignment="Top" CommandParameter="{Binding CategoryId}"  
                      Background="Transparent">  
                <TextBlock Text="{Binding CategoryName}" TextWrapping="Wrap" TextAlignment="Center" Margin="10"/>  
              </Button>  
            </StackPanel>  
          </DataTemplate>  
        </ItemsControl.ItemTemplate>  
      </ItemsControl>  
    </ScrollViewer>  
  </Grid>  
</Window>  

Result:

Answer 3

Hi, you can bind Background to data item like in following demo:

<Window x:Class="Window021"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
        xmlns:local="clr-namespace:WpfApp1.WpfApp021"  
        mc:Ignorable="d"  
        Title="Window021" Height="450" Width="815"  
        Background="Transparent" AllowsTransparency="True" WindowStyle="None">  
  <Window.DataContext>  
    <local:ViewModel/>  
  </Window.DataContext>  
  <Grid Background="Transparent">  
    <ScrollViewer x:Name="Grid" >  
      <ItemsControl ItemsSource="{Binding Categories}" Margin="50" Background="Transparent">  
        <ItemsControl.ItemsPanel>  
          <ItemsPanelTemplate>  
            <WrapPanel Orientation="Horizontal" VerticalAlignment="Top" Width="{Binding ElementName=Grid, Path=ActualWidth}" Margin="0,0,0,20"/>  
          </ItemsPanelTemplate>  
        </ItemsControl.ItemsPanel>  
        <ItemsControl.ItemTemplate>  
          <DataTemplate>  
            <StackPanel Margin="10" Background="{Binding BG}">  
              <Button Width="150" Height="120" HorizontalAlignment="Left"  
                      VerticalAlignment="Top" CommandParameter="{Binding CategoryId}"  
                      Background="Transparent">  
                <TextBlock Text="{Binding CategoryName}" TextWrapping="Wrap" TextAlignment="Center" Margin="10"/>  
              </Button>  
            </StackPanel>  
          </DataTemplate>  
        </ItemsControl.ItemTemplate>  
      </ItemsControl>  
    </ScrollViewer>  
  </Grid>  
</Window>  

Classes:

Imports System.Collections.ObjectModel  
Imports System.ComponentModel  
  
Namespace WpfApp021  
  Public Class ViewModel  
  
#Region " prepare demo"  
    Public Sub New()  
      ' connect collection to source for displaying elements  
      cvs.Source = col  
      ' prepare data for demo  
      For i = 1 To 12  
        Dim d As New Data With {.CategoryId = i, .CategoryName = $"CategoryName {i}"}  
        d.BG = New SolidColorBrush(Color.FromArgb(255, 0, 0, CByte(255 - 20 * i)))  
        col.Add(d)  
      Next  
    End Sub  
  
#End Region  
#Region " collection of framework elements for display (in ItemsSource)"  
    Private cvs As New CollectionViewSource  
    Private col As New ObservableCollection(Of Data)  
  
    Public ReadOnly Property Categories As ICollectionView  
      Get  
        Return cvs.View  
      End Get  
    End Property  
#End Region  
  End Class  
  
  Public Class Data  
    Public Property CategoryId As Integer  
    Public Property CategoryName As String  
    Public Property BG As Brush  
  End Class  
  
End Namespace  

Result: