remove Item template background

AbdAlghani 1 Reputation point
2020-04-04T21:39:10.577+00:00

when I make template to list view item in UWP it give me a background white or black to that template such as:
7104-annotation-2020-04-04-222514.jpg

how can I remove this black background

this is the template that I was working with:

        <controls:MasterDetailsView.ItemTemplate>  
            <DataTemplate x:DataType="models:Country">  
                  
                <controls:DropShadowPanel Style="{StaticResource ListViewItemShadowStyle}">  
                      
                <Grid HorizontalAlignment="Stretch"  
                      VerticalAlignment="Stretch"  
                      Width="460"  
                      Background="Transparent">  
                    <Grid.ColumnDefinitions>  
                        <ColumnDefinition Width="Auto"/>  
                        <ColumnDefinition Width="*"/>  
                    </Grid.ColumnDefinitions>  


                        <controls:ImageEx Style="{StaticResource ImageExStyle}"  
                                          Width="48"  
                                          Height="48"  
                                          CornerRadius="30">  
                            <controls:ImageEx.Source>  
                                <BitmapImage UriSource="{x:Bind ImagePath}"/>  
                            </controls:ImageEx.Source>  
                        </controls:ImageEx>  

                    <TextBlock Style="{StaticResource BodyTextBlockStyle}"  
                   Grid.Column="1"  
                   HorizontalAlignment="Center"  
                   VerticalAlignment="Center"  
                   Text="{x:Bind Name}"/>  
                </Grid>  
                      
                      
                      
                </controls:DropShadowPanel>  
                  
            </DataTemplate>  

        </controls:MasterDetailsView.ItemTemplate>  

ItemContainerStyle have this resource:

<ResourceDictionary.MergedDictionaries>  
    <ResourceDictionary Source="ms-appx:///Resources/Brushes/ListViewItemBrushes.xaml"/>  
</ResourceDictionary.MergedDictionaries>  

<Style x:Key="ListViewItemStyle" TargetType="ListViewItem">  
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>  
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />  
    <Setter Property="Background" Value="Transparent"/>  
    <Setter Property="BorderBrush" Value="Transparent"/>  
    <Setter Property="BorderThickness" Value="1.5"/>  
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>  
    <Setter Property="TabNavigation" Value="Local"/>  
    <Setter Property="IsHoldingEnabled" Value="True"/>  
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>  
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>  
    <Setter Property="HorizontalAlignment" Value="Stretch"/>  
    <Setter Property="VerticalAlignment" Value="Stretch"/>  
    <Setter Property="Margin" Value="8"/>  
    <Setter Property="Padding" Value="8"/>  
    <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>  
    <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>  
    <Setter Property="Template">  
        <Setter.Value>  
            <ControlTemplate TargetType="ListViewItem">  


                <ListViewItemPresenter Background="Transparent"  
                                       CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"     
                                       ContentMargin="{TemplateBinding Padding}"       
                                       CheckMode="Overlay"            
                                       CornerRadius="10"  
                                       ContentTransitions="{TemplateBinding ContentTransitions}"       
                                       CheckBoxBrush="{ThemeResource SystemControlBackgroundChromeMediumBrush}"         
                                       DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"     
                                       DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"                 
                                       DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"        
                                       DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"          
                                       FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"         
                                       FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"    
                                       HorizontalContentAlignment="Stretch"   
                                       HorizontalAlignment="Stretch"  
                                       PointerOverForeground="{ThemeResource SystemControlForegroundBaseHighBrush}"          
                                       PressedBackground="{ThemeResource ListViewItemBackgroundSolidColorBrushPointerPressed}"     
                                       PlaceholderBackground="{ThemeResource ListViewItemBackgroundSolidColorBrushPrimary}"     
                                       PointerOverBackground="{ThemeResource ListViewItemBackgroundSolidColorBrushPointerHover}"               
                                       ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}"                   
                                       SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSolidColorBrushPointerPressedAfterPressing}"    
                                       SelectionCheckMarkVisualEnabled="True"                      
                                       SelectedForeground="{ThemeResource SystemControlForegroundBaseHighBrush}"       
                                       SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSolidColorBrushPointerHoverAfterPressing}"     
                                       SelectedBackground="{ThemeResource ListViewItemBackgroundSolidColorBrushPrimaryAfterPressing}"                   
                                       VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>  
            </ControlTemplate>  
        </Setter.Value>  
    </Setter>  
</Style>  

As you see there are brushes combined -> resource that have that brushes colors:

<!--ListView item background and border color in Light theme-->  
<Color x:Key="ListViewItemBackgroundColorPrimaryLight">#FFFFFF</Color>  
<Color x:Key="ListViewItemBackgroundColorPointerHoverLight">#CCCCCC</Color>  
<Color x:Key="ListViewItemBackgroundColorPointerPressedLight">#B6B6B6</Color>  

<Color x:Key="ListViewItemBackgroundColorPrimaryAfterPressingLight">#2C2C2C</Color>  
<Color x:Key="ListViewItemBackgroundColorPointerHoverAfterPressingLight">#333333</Color>  
<Color x:Key="ListViewItemBackgroundColorPointerPressedAfterPressingLight">#4D4D4D</Color>  

<!--??? I am not using yet-->  
<Color x:Key="ListViewItemBorderColorPrimaryAfterPressingLight">#9676B8</Color>  
<Color x:Key="ListViewItemBorderColorPointerHoverAfterPressingLight">#8464A8</Color>  
<Color x:Key="ListViewItemBorderColorPointerPressedAfterPressingLight">#735298</Color>  


<!--ListView item background and border color in Dark theme-->  
<Color x:Key="ListViewItemBackgroundColorPrimaryDark">#2C2C2C</Color>  
<Color x:Key="ListViewItemBackgroundColorPointerHoverDark">#333333</Color>  
<Color x:Key="ListViewItemBackgroundColorPointerPressedDark">#4D4D4D</Color>  

<Color x:Key="ListViewItemBackgroundColorPrimaryAfterPressingDark">#2C2C2C</Color>  
<Color x:Key="ListViewItemBackgroundColorPointerHoverAfterPressingDark">#333333</Color>  
<Color x:Key="ListViewItemBackgroundColorPointerPressedAfterPressingDark">#4D4D4D</Color>  

<!--??? I am not using yet-->  
<Color x:Key="ListViewItemBorderColorPrimaryAfterPressingDark">#9676B8</Color>  
<Color x:Key="ListViewItemBorderColorPointerHoverAfterPressingDark">#A487C3</Color>  
<Color x:Key="ListViewItemBorderColorPointerPressedAfterPressingDark">#B298CE</Color>  

<ResourceDictionary.ThemeDictionaries>  
      
    <ResourceDictionary x:Key="Light">  
        <SolidColorBrush x:Key="ListViewItemBackgroundSolidColorBrushPrimary" Color="{StaticResource ListViewItemBackgroundColorPrimaryLight}"/>  
        <SolidColorBrush x:Key="ListViewItemBackgroundSolidColorBrushPointerHover" Color="{StaticResource ListViewItemBackgroundColorPointerHoverLight}"/>  
        <SolidColorBrush x:Key="ListViewItemBackgroundSolidColorBrushPointerPressed" Color="{StaticResource ListViewItemBackgroundColorPointerPressedLight}"/>  

        <SolidColorBrush x:Key="ListViewItemBackgroundSolidColorBrushPrimaryAfterPressing" Color="{StaticResource ListViewItemBackgroundColorPrimaryAfterPressingLight}"/>  
        <SolidColorBrush x:Key="ListViewItemBackgroundSolidColorBrushPointerHoverAfterPressing" Color="{StaticResource ListViewItemBackgroundColorPointerHoverAfterPressingLight}"/>  
        <SolidColorBrush x:Key="ListViewItemBackgroundSolidColorBrushPointerPressedAfterPressing" Color="{StaticResource ListViewItemBackgroundColorPointerPressedAfterPressingLight}"/>  

        <SolidColorBrush x:Key="ListViewItemBorderSolidColorBrushPrimaryAfterPressing" Color="{StaticResource ListViewItemBorderColorPrimaryAfterPressingLight}"/>  
        <SolidColorBrush x:Key="ListViewItemBorderSolidColorBrushPointerHoverAfterPressing" Color="{StaticResource ListViewItemBorderColorPointerHoverAfterPressingLight}"/>  
        <SolidColorBrush x:Key="ListViewItemBorderSolidColorBrushPointerPressedAfterPressing" Color="{StaticResource ListViewItemBorderColorPointerPressedAfterPressingLight}"/>  
    </ResourceDictionary>  

    <ResourceDictionary x:Key="Dark">  
        <SolidColorBrush x:Key="ListViewItemBackgroundSolidColorBrushPrimary" Color="{StaticResource ListViewItemBackgroundColorPrimaryDark}"/>  
        <SolidColorBrush x:Key="ListViewItemBackgroundSolidColorBrushPointerHover" Color="{StaticResource ListViewItemBackgroundColorPointerHoverDark}"/>  
        <SolidColorBrush x:Key="ListViewItemBackgroundSolidColorBrushPointerPressed" Color="{StaticResource ListViewItemBackgroundColorPointerPressedDark}"/>  

        <SolidColorBrush x:Key="ListViewItemBackgroundSolidColorBrushPrimaryAfterPressing" Color="{StaticResource ListViewItemBackgroundColorPrimaryAfterPressingDark}"/>  
        <SolidColorBrush x:Key="ListViewItemBackgroundSolidColorBrushPointerHoverAfterPressing" Color="{StaticResource ListViewItemBackgroundColorPointerHoverAfterPressingDark}"/>  
        <SolidColorBrush x:Key="ListViewItemBackgroundSolidColorBrushPointerPressedAfterPressing" Color="{StaticResource ListViewItemBackgroundColorPointerPressedAfterPressingDark}"/>  

        <SolidColorBrush x:Key="ListViewItemBorderSolidColorBrushPrimaryAfterPressing" Color="{StaticResource ListViewItemBorderColorPrimaryAfterPressingDark}"/>  
        <SolidColorBrush x:Key="ListViewItemBorderSolidColorBrushPointerHoverAfterPressing" Color="{StaticResource ListViewItemBorderColorPointerHoverAfterPressingDark}"/>  
        <SolidColorBrush x:Key="ListViewItemBorderSolidColorBrushPointerPressedAfterPressing" Color="{StaticResource ListViewItemBorderColorPointerPressedAfterPressingDark}"/>  
    </ResourceDictionary>  
      
</ResourceDictionary.ThemeDictionaries>  

and model class:

public class Country  
{  
    public String Name { get; set; }  
    public String ImagePath { get; set; }  
}  

and thanks you all

Universal Windows Platform (UWP)
Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,670 questions
{count} votes

2 answers

Sort by: Most helpful
  1. Peter Fleischer (former MVP) 19,231 Reputation points
    2020-04-05T06:41:18.64+00:00

    Hi, without seeing your code I cannot find the problem. Following demo work without problems.

    XAML:

    <Page  
        x:Class="UWP10App1VB.Page17"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:local="using:UWP10App1VB"  
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
        mc:Ignorable="d"  
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
      <Page.DataContext>  
        <local:Page17VM/>  
      </Page.DataContext>  
      <Grid Background="LightGreen">  
        <ListView ItemsSource="{Binding View}" Background="Transparent">  
          <ListView.ItemTemplate>  
            <DataTemplate>  
              <StackPanel Orientation="Horizontal">  
                <Image Source="{Binding Picture}" Width="100" Margin="5"/>  
                <TextBlock Text="{Binding Description}" VerticalAlignment="Center" Margin="10 0 0 0"/>  
              </StackPanel>  
            </DataTemplate>  
          </ListView.ItemTemplate>  
        </ListView>  
      </Grid>  
    </Page>  
    

    And ViewModel:

    Public Class Page17VM  
      Public Sub New()  
        View.Add(New Data With {.Description = "Great Britain", .Picture = GetImageSource("Assets/FlagUK.png")})  
        View.Add(New Data With {.Description = "Switzerland", .Picture = GetImageSource("Assets/FlagCH.png")})  
        View.Add(New Data With {.Description = "United States", .Picture = GetImageSource("Assets/FlagUS.png")})  
      End Sub  
      
      Private Function GetImageSource(filepath As String) As ImageSource  
        Dim uri = $"ms-appx:///{filepath}"  
        Return New BitmapImage(New Uri(uri))  
      End Function  
      
      Public Property View As New List(Of Data)  
      
      Public Class Data  
        Public Property Description As String  
        Public Property Picture As ImageSource  
      End Class  
    End Class  
    

    Result:

    7049-x.png

    0 comments No comments

  2. AbdAlghani 1 Reputation point
    2020-04-05T14:33:25.15+00:00

    anonymous user-3316

    Hi you can see my code above:
    the background of grid that I have is transparent and the item of list itself has a background and there is margin between items -> the background of list is also has a custom brush:

    <!--The background color for the pane and details of MasterDetails in light theme-->
    <Color x:Key="MasterPaneBackgroundColorLight">#E6E6E6</Color>
    <Color x:Key="DetailsBackgroundColorLight">#E6E6E6</Color>
    
    
    <!--The background color for the pane and details of MasterDetails in dark theme-->
    <Color x:Key="MasterPaneBackgroundColorDark">#151515</Color>
    <Color x:Key="DetailsBackgroundColorDark">#151515</Color>
    
    
    <ResourceDictionary.ThemeDictionaries>
    
        <ResourceDictionary x:Key="Light">
            <SolidColorBrush x:Key="MasterPaneBackgroundSolidColorBrush" Color="{StaticResource MasterPaneBackgroundColorLight}"/>
            <SolidColorBrush x:Key="DetailsBackgroundSolidColorBrush" Color="{StaticResource DetailsBackgroundColorLight}"/>
        </ResourceDictionary>
    
        <ResourceDictionary x:Key="Dark">
            <SolidColorBrush x:Key="MasterPaneBackgroundSolidColorBrush" Color="{StaticResource MasterPaneBackgroundColorDark}"/>
            <SolidColorBrush x:Key="DetailsBackgroundSolidColorBrush" Color="{StaticResource DetailsBackgroundColorDark}"/>
        </ResourceDictionary>
    </ResourceDictionary.ThemeDictionaries>
    
    0 comments No comments