ItemControl background for child control

Question

question

BinoyBalakrishnan-3805 asked · May 10 at 09:20 AM

ItemControl background for child control

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>

[1]: https://i.stack.imgur.com/WiXGU.png

windows-wpf

10 |1000 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 1 · 2020-05-10T15:16:24.107Z

PeterFleischer-3316 answered · May 10 at 03:16 PM

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>

x.png (24.8 KiB)

· 1 · Share

10 |1000 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

BinoyBalakrishnan-3805 · May 10 at 03:26 PM

Hi @PeterFleischer-3316, if itemcontrols backgound is transparent, then how can we avoid grid background color showing void areas of itemscontrol.

0 · ·

Answer 2 · 2020-05-10T16:29:26.303Z

PeterFleischer-3316 answered · May 10 at 04:29 PM

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:

x.png (208.3 KiB)

· 1 · Share

10 |1000 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

BinoyBalakrishnan-3805 · May 10 at 05:50 PM

Hi @PeterFleischer-3316, When I set a gradient color to background it doesn't work as I expected.

I am expecting like the given picture.

0 · ·

annotation-2020-05-10-231314.jpg (42.1 KiB)

Answer 3 · 2020-05-10T20:11:58.977Z

PeterFleischer-3316 answered · May 10 at 08:11 PM

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:

x.png (273.7 KiB)

· Share

10 |1000 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

question