question

AbdAlghani avatar image
0 Votes"
AbdAlghani asked FayWang-MSFT commented

remove Item template background

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

windows-uwpwindows-wpf
· 5
5 |1600 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.

When the background of Grid is set as Transparent, it will display the color of DropShadowPanel. How do you set the style of DropShadowPanel? Can you provide a simple sample that can be reproduced for us to test?

0 Votes 0 ·

Hi, have you solved your issue? And can you provide the above information?

0 Votes 0 ·

Hi, is there any update?

0 Votes 0 ·

Hi, do you have other questions?

0 Votes 0 ·

Hi, any updates about this issue?

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

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



x.png (96.7 KiB)
5 |1600 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.

AbdAlghani avatar image
0 Votes"
AbdAlghani answered

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>
5 |1600 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.