question

BinoyBalakrishnan-3805 avatar image
0 Votes"
BinoyBalakrishnan-3805 asked ·

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

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

PeterFleischer-3316 avatar image
1 Vote"
PeterFleischer-3316 answered ·

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>

7950-x.png



x.png (24.8 KiB)
· 1 · Share
10 |1000 characters needed characters left characters exceeded

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

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

0 Votes 0 · ·
PeterFleischer-3316 avatar image
1 Vote"
PeterFleischer-3316 answered ·

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:

8015-x.png



x.png (208.3 KiB)
· 1 · Share
10 |1000 characters needed characters left characters exceeded

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

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.
7938-annotation-2020-05-10-231314.jpg


0 Votes 0 · ·
PeterFleischer-3316 avatar image
0 Votes"
PeterFleischer-3316 answered ·

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:

7970-x.png





x.png (273.7 KiB)
· Share
10 |1000 characters needed characters left characters exceeded

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