UWP ListView selected item highlight disappears if ItemContainerStyle is set - xaml

I am using a ListView to display a list of items. But when I set the font of the items using ItemContainerStyle and now an item is selected, the ListView highlight (blue line on the left) is no longer visible. On this screenshot here is a comparison. The problem has come with the installation of the Microsoft.UI.Xaml package, because here the design of ListView has been changed. Is there any way to fix this without having to remove ItemContainerStyle or the Microsoft.UI.Xaml package?
MainPage.xaml
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<ListView HorizontalAlignment="Left">
<ListViewItem Content="ABCD"/>
<ListViewItem Content="abcd"/>
<ListViewItem Content="1234"/>
</ListView>
<ListView HorizontalAlignment="Right">
<ListViewItem Content="ABCD"/>
<ListViewItem Content="abcd"/>
<ListViewItem Content="1234"/>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="FontSize" Value="16"></Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
</Grid>
</Page>
App.xaml
<Application
x:Class="App1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1">
<Application.Resources>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
</Application.Resources>
</Application>

The reason for this behavior is that when you set a new ItemContainerStyle for the listview, it overrides the default item style that is used from the WinUI library.
The solution to this is that you need to give the item a style based on the style that the item is currently using. I find the default style of the ListViewItem in WinUI GitHub: ListViewItem_themeresources. So you just need to create a style that is based on the DefaultListViewItemStyle.
You will need to change a little bit of your code like this:
<ListView>
<ListViewItem Content="ABCD"/>
<ListViewItem Content="abcd"/>
<ListViewItem Content="1234" />
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem" BasedOn="{StaticResource DefaultListViewItemStyle}">
<Setter Property="FontSize" Value="25"></Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>

Related

How to call a Style in a ResourceDictionary file in XAML?

I have a button style in a created style.xaml ResourceDictionary file.
I used this code to call it:
<Button Style="{DynamicResource exitButton}" />
But it didn't recognize the style key either using StaticResource doesn't work too. How to solve this problem?
My style code:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="exitButton" TargetType="Button">
<Setter Property="Width" Value="22"/>
<Setter Property="Height" Value="32"/>
<Setter Property="Background" Value="#FF7070"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock Text="X"
FontSize="15"
Foreground="White"
FontWeight="Bold"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
You have to import the ResourceDictionary file in your xaml, in the Resources tags.
Something like this:
<UserControl blablabla...>
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/*PROJECT_NAME*;component/*FOLDER_PATH*/style.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</USerControl.Resources>
<!-- the content -->
...
<Button Style="{StaticResource exitButton}"/>
</UserControl>
You have two options:
As HasNotifications said, embede the resource into the view that you want the style take affect
Embed the style to the application ResourceDictionary. On that case the style will be available to any view on the application
Add the following code to the App.xaml file:
<Application x:Class="WpfApp1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp1"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/*PROJECT_NAME*;component/*FOLDER_PATH*/style.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>

template 10: declaring a new button in hamburger navigation and navigating to its page

I am kind of beginner in UWP Platform and I am building an app using template 10. I have used GridView for a particular page, but the problem is that the GridView shows its borders when you hover over it or select its item. Like this:
I want the border not to show up whenever the user hovers over it or selects a GridView item.
My XAML Code is:
<Page
x:Class="Sample.Views.Category"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Sample.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data="using:Sample.ViewModels"
xmlns:controls="using:Template10.Controls"
mc:Ignorable="d">
<Page.Resources>
<DataTemplate x:DataType="data:CategoryViewModel" x:Key="CategoryDataTemplate">
<StackPanel HorizontalAlignment="Center" Margin="10,0,20,10">
<Image Width="150" Source="{x:Bind IconFile}" />
<TextBlock FontSize="16" Text="{x:Bind Category}" HorizontalAlignment="Center" />
<!--<TextBlock FontSize="10" Text="{x:Bind Author}" HorizontalAlignment="Center" />-->
</StackPanel>
</DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- header -->
<controls:PageHeader x:Name="pageHeader" Frame="{x:Bind Frame}" Text="Category Page" Grid.Row="0" Grid.ColumnSpan="2">
<!-- place stretched, across top -->
<RelativePanel.AlignTopWithPanel>True</RelativePanel.AlignTopWithPanel>
<RelativePanel.AlignRightWithPanel>True</RelativePanel.AlignRightWithPanel>
<RelativePanel.AlignLeftWithPanel>True</RelativePanel.AlignLeftWithPanel>
</controls:PageHeader>
<GridView Grid.Row="2" >
<GridView ItemsSource="{x:Bind Categories}"
IsItemClickEnabled="True"
ItemClick="GridView_ItemClick"
ItemTemplate="{StaticResource CategoryDataTemplate}" >
</GridView>
</GridView>
</Grid>
This is not a Template 10 question, but here's the answer:
<GridView>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="0,0,4,4" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GridView.ItemContainerStyle>
</GridView>
Best of luck.
Try setting the gridview BorderThickness to 0, and brush to Transparent (assuming the thickness didn't work)
https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.gridview.aspx
Here is a link to the properties for the gridview control in XAML.
since you said you're a beginner, try messing around with the different properties and since you have a nested gridview inside a gridview (not sure why) try setting it on both of them.
e.g.:
<GridView Grid.Row="2" BorderThickness="0">

Move Interaction.Behaviors to Style, Template or something else

I have many XAML TextBlock which looks like this:
<TextBlock Text="{Binding InspectionCount}" Style="{StaticResource FilterText}">
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding SetModeToAll}" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</TextBlock>
I want to reduce amount of XAML code and write something like this:
<MyTextBlock Text="{Binding InspectionCount}"
Style="{StaticResource FilterText}"
Command="{Binding SetModeToAll}" />
I know only one way to do such things - create the new class (which is inherited from TextBlock), add AttachedProperty (Command) to new class, and create a Style for a new class.
But looks like I cannot inherit my class from TextBlock:
public sealed class FilterTextBlock : TextBlock
Cannot inherit from sealed class TextBlock
Why I can not do it? May be there is other way to do what I wish ?
I have discovered that the following WORKS. and solves the question from many places, I will start answering, Try the following!
<Page
x:Class="Example1.ListBoxTest"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Example1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
mc:Ignorable="d">
<Page.Resources>
<i:BehaviorCollection x:Key="behaviors">
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding SetModeToAll}" />
</core:EventTriggerBehavior>
</i:BehaviorCollection>
<Style TargetType="TextBlock" x:Key="textblockstyle">
<Setter Property="i:Interaction.Behaviors" Value="{StaticResource behaviors}">
</Setter>
</Style>
</Page.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
<TextBlock Text="Testing" Foreground="Red" FontSize="20" Style="{StaticResource textblockstyle}">
</TextBlock >
</Grid>
It is curious, if I set the behaviors inside the propery i:Interaction.Behaviors does not work but in this way the Command is called!!
Please tell me it works you too!
Just use:
<Setter Property="i:Interaction.Behaviors">
<Setter.Value>
<i:BehaviorCollection>
<MyCustomBehavior />
</i:BehaviorCollection>
</Setter.Value>
</Setter>
inside the <Style TargetType="TextBlock"> tag.
Don't forget to include xmlns:i="using:Microsoft.Xaml.Interactivity" at the top of the page.

LongListSelector JumpListStyle background binding not works

I am using longlistselector in my win phone 8 app. I have used ItemTemplate, GroupHeaderTemplate and JumpListStyle. For GroupHeaderTemplate I am using xaml
<DataTemplate>
<Grid Margin="0 0 0 10">
<Grid.Background>
<SolidColorBrush Color="{Binding DataContext.ForegroundColor, ElementName=LayoutRoot}"/>
</Grid.Background>
</Grid>
</DataTemplate>
This is working fine. But if I apply same to ItemTemplate for JumpListStyle than it does nothing. The only difference is in this case template is defining inside style.
<phone:LongListSelector.JumpListStyle>
<Style TargetType="phone:LongListSelector">
<Setter Property="ItemTemplate" Value="{StaticResource JumpListDataTemplate}"/>
</Style>
</phone:LongListSelector.JumpListStyle>
Any suggestion, what is wrong with the above code?

Windows Store app's overriden resource value ignored in template

I'm creating a Windows Store app where each page has a dominant color used for titles, buttons and such.
In App.xaml I've created a default Brush that's overriden in each Page's xaml file, and a style template for Buttons which I reuse in every page. The templates are supposed to use the page's color but for some reason they stick with the default value.
Here are my xaml files.
App.xaml
<Application
x:Class="Foo.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Foo"
RequestedTheme="Light">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary>
<SolidColorBrush x:Name="SectionDefaultBrush" Color="Red" />
<Style TargetType="Button" x:Name="NavigationButtonStyle">
<Setter Property="FontFamily" Value="Myriad Pro" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Rectangle x:Name="Border" Fill="#f4f4f4" Margin="0" />
<TextBlock Foreground="{ ThemeResource SectionDefaultBrush }" Text=">" FontSize="31" />
<ContentPresenter x:Name="Content" VerticalAlignment="Center" Foreground="#5A5A5A" HorizontalAlignment="Left" FontSize="31"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
SomePage.xaml
<Page
x:Class="Foo.Pages.SomePage"
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"
mc:Ignorable="d">
<Page.Resources>
<SolidColorBrush x:Key="SectionDefaultBrush" Color="Green" />
</Page.Resources>
<ViewBox>
<Canvas>
<TextBlock Text="Some text" Foreground="{ ThemeResource SectionDefaultBrush }" Canvas.Left="130" TextWrapping="Wrap" Canvas.Top="252" Height="177" Width="507" FontFamily="Myriad Pro" FontSize="54" />
<Button Content="Click me" Style="{ ThemeResource NavigationButtonStyle }" Canvas.Left="130" Canvas.Top="900" Width="507" Height="48" />
</Canvas>
<ViewBox>
In this example, the TextBlock's text color is green as expected (and red if I remove the Brush from Page.Resources), but the Button's content remains red. Is there a way to tell the template to use the final color ?
The app's resource dictionary doesn't know about other dictionaries and unlike with WPF's DynamicResources - StaticResource isn't reevaluated and ThemeResource is, but I think only when the actual theme changes. The way you can customize the color of that button is to use TemplateBinding in the template and bind to say the Foreground property of the button and also set that in the Foreground Setter of your button style to {StaticResource SectionDefaultBrush}. Then in your page you can override that by setting the Foreground of the button to a different value or using a derived button style that changes the Foreground value.
Ideally too - you should define theme resources in your dictionary so the brushes change depending on OS theme (especially high contrast). You might want to name your brush then as "SectionDefaultThemeBrush" instead of just "SectionDefaultBrush".