I have a time picker control in xaml as
<TimePicker Time="{Binding SelectedTime, Mode=TwoWay}" HorizontalContentAlignment="Center"
Style="{StaticResource TimePickerStyle}" x:Name="SeekTimePicker" />
and of the control is
<Style x:Key="TimePickerStyle" TargetType="TimePicker">
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}" />
<Setter Property="FontSize" Value="{ThemeResource ContentControlFontSize}" />
<Setter Property="Foreground" Value="{ThemeResource TimePickerForegroundThemeBrush}" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TimePicker" >
<StackPanel x:Name="LayoutRoot" Margin="{TemplateBinding Padding}" Background="Red">
<ContentPresenter x:Name="HeaderContentPresenter"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="aaaa" Margin="0,0,0,-3"
Style="{StaticResource HeaderContentPresenterStyle}" />
<Button x:Name="FlyoutButton" BorderBrush="{TemplateBinding Foreground}" BorderThickness="1"
Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
IsEnabled="{TemplateBinding IsEnabled}" Padding="6.5,0,0,3" Content="qqqqqqqqqqqq" Background="Green"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now it look like:
But I want to format it as:
This can do by editing template inside time picker style as below
<Style x:Key="TimePickerStyle" TargetType="TimePicker">
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}" />
<Setter Property="FontSize" Value="{ThemeResource ContentControlFontSize}" />
<Setter Property="Foreground" Value="{ThemeResource TimePickerForegroundThemeBrush}" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TimePicker">
<StackPanel x:Name="LayoutRoot" Margin="{TemplateBinding Padding}">
<ContentPresenter x:Name="HeaderContentPresenter"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}" Margin="0,0,0,-3"
Style="{StaticResource HeaderContentPresenterStyle}" />
<Button x:Name="FlyoutButton" BorderBrush="{TemplateBinding Foreground}" BorderThickness="1"
Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
IsEnabled="{TemplateBinding IsEnabled}" Padding="6.5,0,0,3" >
<Button.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding ElementName=FlyoutButton,Path=DataContext.SelectedTimeText}"/>
</DataTemplate>
</Button.ContentTemplate>
</Button>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I use the Live Visual Tree viewer and Live Property Explorer tools in VS 2022 all the time when working with WinUI 3 apps and XAML. Examining, and interacting with, elements in the "regular" visual tree (that starts at RootScrollViewer, see attached diagram) is easy but I can't seem to do the same thing with Popups and Flyouts, which have a different root (PopupRoot) than the normal UI tree.
This screenshot shows an expanded PopupRoot for a DatePicker Flyout. But I can't expand any of the LoopingSelector elements or look at the Live Properties for any elements in PopupRoot because the Flyout closes (and PopupRoot becomes empty) as soon as it loses focus.
Is there any way I can examine the PopupRoot tree and its element properties in the same, or similar, way I can work with the RootScrollViewer tree? Perhaps a setting I've overlooked? Or does anyone know of other tools that would help me achieve this for a WinUI 3 app?
Thanks for any ideas.
I'm using a custom version of the vanilla DatePicker so I can play with OnApplyTemplate() and Measure(). The Styles are right out of the WindowsAppSDK v1.2.22116 Generic.xaml file with modified names (and slight changes to some Width properties).
CustomDatePicker.cs
using Microsoft.UI.Xaml.Controls;
using CommunityToolkit.Mvvm.ComponentModel;
namespace TestDatePicker.Classes;
[ObservableObject]
public partial class CustomDatePicker : DatePicker
{
[ObservableProperty] private Button _flyoutButton;
[ObservableProperty] private ColumnDefinition _dayColumn;
[ObservableProperty] private ColumnDefinition _monthColumn;
[ObservableProperty] private ColumnDefinition _yearColumn;
[ObservableProperty] private TextBlock _dayTextBlock;
[ObservableProperty] private TextBlock _monthTextBlock;
[ObservableProperty] private TextBlock _yearTextBlock;
[ObservableProperty] private DatePickerFlyoutPresenter _flyoutPresenter;
protected override void OnApplyTemplate()
{
base.OnApplyTemplate();
FlyoutButton = GetTemplateChild("FlyoutButton") as Button;
if (FlyoutButton == null) { return; }
DayColumn = GetTemplateChild("DayColumn") as ColumnDefinition;
if (DayColumn == null) { return; }
MonthColumn = GetTemplateChild("MonthColumn") as ColumnDefinition;
if (MonthColumn == null) { return; }
YearColumn = GetTemplateChild("YearColumn") as ColumnDefinition;
if (YearColumn == null) { return; }
DayTextBlock = GetTemplateChild("DayTextBlock") as TextBlock;
if (DayTextBlock == null) { return; }
MonthTextBlock = GetTemplateChild("MonthTextBlock") as TextBlock;
if (MonthTextBlock == null) { return; }
YearTextBlock = GetTemplateChild("YearTextBlock") as TextBlock;
if (YearTextBlock == null) { return; }
}
}
CustomDatePicker.xaml
(includes Styles for:
DatePickerBorderThemeThickness
CustomDatePickerFlyoutButtonStyle
CustomDatePickerStyle
DatePickerFlyoutPresenter
CustomDatePickerFlyoutPresenterStyle
LoopingSelector
DefaultLoopingSelectorStyle
LoopingSelectorItem)
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:primitives="using:Microsoft.UI.Xaml.Controls.Primitives"
xmlns:helpers="using:TestDatePicker.Helpers">
<Thickness x:Key="DatePickerBorderThemeThickness">1</Thickness>
<Style x:Key="CustomDatePickerFlyoutButtonStyle" TargetType="Button">
<Setter Property="helpers:BindingHelper.StyleLoaded" Value="CustomDatePickerFlyoutButtonStyle"/>
<Setter Property="ElementSoundMode" Value="FocusOnly" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups...>
<ContentPresenter x:Name="ContentPresenter"
Background="{TemplateBinding Background}"
Foreground="{TemplateBinding Foreground}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
AutomationProperties.AccessibilityView="Raw"
CornerRadius="{TemplateBinding CornerRadius}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CustomDatePickerStyle" TargetType="DatePicker" BasedOn="{StaticResource DefaultDatePickerStyle}">
<!--<Setter Property="helpers:BindingHelper.StyleLoaded" Value="CustomDatePickerStyle"/>-->
<Setter Property="Orientation" Value="Horizontal" />
<Setter Property="FocusVisualMargin" Value="0" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="{ThemeResource DatePickerButtonBackground}" />
<Setter Property="Foreground" Value="{ThemeResource DatePickerButtonForeground}" />
<Setter Property="BorderBrush" Value="{ThemeResource DatePickerButtonBorderBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource DatePickerBorderThemeThickness}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="FocusVisualMargin" Value="-3" />
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DatePicker">
<Grid x:Name="LayoutRoot" Margin="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups...>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentPresenter x:Name="HeaderContentPresenter"
Grid.Row="0"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Foreground="{ThemeResource DatePickerHeaderForeground}"
Margin="{ThemeResource DatePickerTopHeaderMargin}"
MaxWidth="{ThemeResource DatePickerThemeMaxWidth}"
TextWrapping="Wrap"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Visibility="Collapsed"
AutomationProperties.AccessibilityView="Raw" />
<Button x:Name="FlyoutButton"
Grid.Row="1"
Style="{StaticResource CustomDatePickerFlyoutButtonStyle}"
Background="{TemplateBinding Background}"
Foreground="{TemplateBinding Foreground}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
IsEnabled="{TemplateBinding IsEnabled}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalAlignment="Top"
FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}"
CornerRadius="{TemplateBinding CornerRadius}">
<!--MinWidth="{StaticResource DatePickerThemeMinWidth}"
MaxWidth="{StaticResource DatePickerThemeMaxWidth}"-->
<Grid x:Name="FlyoutButtonContentGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" x:Name="DayColumn" />
<ColumnDefinition Width="Auto" x:Name="FirstSpacerColumn" />
<ColumnDefinition Width="*" x:Name="MonthColumn" />
<ColumnDefinition Width="Auto" x:Name="SecondSpacerColumn" />
<ColumnDefinition Width="*" x:Name="YearColumn" />
</Grid.ColumnDefinitions>
<!-- Code must set the Grid.Column numbers for the TextBoxes based on culture. It also sets the Text. -->
<TextBlock x:Name="DayTextBlock" Text="dd"
TextAlignment="Center"
Padding="{ThemeResource DatePickerHostPadding}"
FontFamily="{TemplateBinding FontFamily}"
FontWeight="{TemplateBinding FontWeight}"
FontSize="{TemplateBinding FontSize}"
AutomationProperties.AccessibilityView="Raw" />
<TextBlock x:Name="MonthTextBlock" Text="mm"
TextAlignment="Center"
Padding="{ThemeResource DatePickerHostPadding}"
FontFamily="{TemplateBinding FontFamily}"
FontWeight="{TemplateBinding FontWeight}"
FontSize="{TemplateBinding FontSize}"
AutomationProperties.AccessibilityView="Raw" />
<TextBlock x:Name="YearTextBlock" Text="yy"
TextAlignment="Center"
Padding="{ThemeResource DatePickerHostPadding}"
FontFamily="{TemplateBinding FontFamily}"
FontWeight="{TemplateBinding FontWeight}"
FontSize="{TemplateBinding FontSize}"
AutomationProperties.AccessibilityView="Raw" />
<Rectangle x:Name="FirstPickerSpacing"
Fill="{ThemeResource DatePickerSpacerFill}"
HorizontalAlignment="Center"
Width="{ThemeResource DatePickerSpacerThemeWidth}"
Grid.Column="1" />
<Rectangle x:Name="SecondPickerSpacing"
Fill="{ThemeResource DatePickerSpacerFill}"
HorizontalAlignment="Center"
Width="{ThemeResource DatePickerSpacerThemeWidth}"
Grid.Column="3" />
</Grid>
</Button>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="DatePickerFlyoutPresenter" BasedOn="{StaticResource CustomDatePickerFlyoutPresenterStyle}"/>
<Style x:Key="CustomDatePickerFlyoutPresenterStyle" TargetType="DatePickerFlyoutPresenter">
<!--<Setter Property="helpers:BindingHelper.StyleLoaded" Value="CustomDatePickerFlyoutPresenterStyle"/>-->
<!--<Setter Property="Width" Value="296" />
<Setter Property="MinWidth" Value="296" />-->
<Setter Property="MaxHeight" Value="398" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="{ThemeResource DatePickerFlyoutPresenterBackground}" />
<Setter Property="AutomationProperties.AutomationId" Value="DatePickerFlyoutPresenter" />
<Setter Property="BorderBrush" Value="{ThemeResource DatePickerFlyoutPresenterBorderBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource DateTimeFlyoutBorderThickness}" />
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DatePickerFlyoutPresenter">
<Border x:Name="Background"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{ThemeResource DateTimeFlyoutBorderPadding}"
MaxHeight="398">
<Grid x:Name="ContentPanel">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid>
<Grid x:Name="PickerHostGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" x:Name="DayColumn" />
<ColumnDefinition Width="Auto" x:Name="FirstSpacerColumn" />
<ColumnDefinition Width="*" x:Name="MonthColumn" />
<ColumnDefinition Width="Auto" x:Name="SecondSpacerColumn" />
<ColumnDefinition Width="*" x:Name="YearColumn" />
</Grid.ColumnDefinitions>
<Rectangle x:Name="FirstPickerSpacing" Fill="{ThemeResource DatePickerFlyoutPresenterSpacerFill}" HorizontalAlignment="Center" Width="{ThemeResource DatePickerSpacerThemeWidth}" Canvas.ZIndex="10000" Grid.Column="1" />
<Rectangle x:Name="SecondPickerSpacing" Fill="{ThemeResource DatePickerFlyoutPresenterSpacerFill}" HorizontalAlignment="Center" Width="{ThemeResource DatePickerSpacerThemeWidth}" Canvas.ZIndex="10000" Grid.Column="3" />
<Grid x:Name="HighlightRect" Canvas.ZIndex="9999" Background="{ThemeResource DatePickerFlyoutPresenterHighlightFill}" CornerRadius="{TemplateBinding CornerRadius}" Grid.Column="0" Grid.ColumnSpan="5" VerticalAlignment="Center" Height="{ThemeResource DatePickerFlyoutPresenterHighlightHeight}" Margin="4,2,4,2" IsHitTestVisible="false" />
<primitives:MonochromaticOverlayPresenter Canvas.ZIndex="10000"
Grid.Column="{Binding ElementName=DayLoopingSelector,Path=(Grid.Column)}"
SourceElement="{Binding ElementName=DayLoopingSelector}"
ReplacementColor="{ThemeResource DatePickerFlyoutPresenterHighlightForegroundColor}"
Height="{ThemeResource DatePickerFlyoutPresenterHighlightHeight}"
VerticalAlignment="Center"
IsHitTestVisible="false" />
<primitives:MonochromaticOverlayPresenter Canvas.ZIndex="10000"
Grid.Column="{Binding ElementName=MonthLoopingSelector,Path=(Grid.Column)}"
SourceElement="{Binding ElementName=MonthLoopingSelector}"
ReplacementColor="{ThemeResource DatePickerFlyoutPresenterHighlightForegroundColor}"
Height="{ThemeResource DatePickerFlyoutPresenterHighlightHeight}"
VerticalAlignment="Center"
IsHitTestVisible="false" />
<primitives:MonochromaticOverlayPresenter Canvas.ZIndex="10000"
Grid.Column="{Binding ElementName=YearLoopingSelector,Path=(Grid.Column)}"
SourceElement="{Binding ElementName=YearLoopingSelector}"
ReplacementColor="{ThemeResource DatePickerFlyoutPresenterHighlightForegroundColor}"
Height="{ThemeResource DatePickerFlyoutPresenterHighlightHeight}"
VerticalAlignment="Center"
IsHitTestVisible="false" />
</Grid>
</Grid>
<Grid Grid.Row="1" Height="{ThemeResource DatePickerFlyoutPresenterAcceptDismissHostGridHeight}" x:Name="AcceptDismissHostGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Height="{ThemeResource DatePickerSpacerThemeWidth}" VerticalAlignment="Top" Fill="{ThemeResource DatePickerFlyoutPresenterSpacerFill}" Grid.ColumnSpan="2" />
<Button x:Name="AcceptButton" Grid.Column="0" Content="" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="16" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="{StaticResource DatePickerFlyoutPresenterAcceptMargin}" Padding="4" Style="{StaticResource DateTimePickerFlyoutButtonStyle}" />
<Button x:Name="DismissButton" Grid.Column="1" Content="" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="16" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="{StaticResource DatePickerFlyoutPresenterDismissMargin}" Padding="4" Style="{StaticResource DateTimePickerFlyoutButtonStyle}" />
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Default style for Windows.UI.Xaml.Controls.Primitives.LoopingSelector -->
<Style TargetType="LoopingSelector" BasedOn="{StaticResource DefaultLoopingSelectorStyle}" />
<Style TargetType="LoopingSelector" x:Key="DefaultLoopingSelectorStyle">
<!--<Setter Property="helpers:BindingHelper.StyleLoaded" Value="DefaultLoopingSelectorStyle"/>-->
<Setter Property="ShouldLoop" Value="True" />
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel VerticalAlignment="Center">
<TextBlock Text="{Binding PrimaryText}" FontFamily="{ThemeResource ContentControlThemeFontFamily}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Control">
<Grid>
<VisualStateManager.VisualStateGroups...>
<ScrollViewer x:Name="ScrollViewer"
VerticalSnapPointsType="Mandatory"
VerticalSnapPointsAlignment="Near"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollMode="Disabled"
ZoomMode="Disabled"
Template="{StaticResource ScrollViewerScrollBarlessTemplate}" />
<RepeatButton x:Name="UpButton" Content="" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="8" Height="{ThemeResource LoopingSelectorUpDownButtonHeight}" Padding="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Visibility="Collapsed" Style="{StaticResource DateTimePickerFlyoutLoopingSelectorNavigationButtonStyle}" Background="{ThemeResource LoopingSelectorUpDownButtonBackground}" Margin="{StaticResource LoopingSelectorUpDownButtonMargin}" IsTabStop="False" />
<RepeatButton x:Name="DownButton" Content="" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="8" Height="{ThemeResource LoopingSelectorUpDownButtonHeight}" Padding="0" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Visibility="Collapsed" Style="{StaticResource DateTimePickerFlyoutLoopingSelectorNavigationButtonStyle}" Background="{ThemeResource LoopingSelectorUpDownButtonBackground}" Margin="{StaticResource LoopingSelectorUpDownButtonMargin}" IsTabStop="False" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Default style for Windows.UI.Xaml.Controls.Primitives.LoopingSelectorItem -->
<Style TargetType="LoopingSelectorItem">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="Foreground" Value="{ThemeResource LoopingSelectorItemForeground}" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="LoopingSelectorItem">
<Grid x:Name="Root" Background="Transparent" Margin="{StaticResource LoopingSelectorItemMargin}" CornerRadius="{TemplateBinding CornerRadius}">
<VisualStateManager.VisualStateGroups...>
<Grid.RenderTransform>
<ScaleTransform x:Name="ContentScaleTransform" />
</Grid.RenderTransform>
<ContentPresenter x:Name="ContentPresenter"
Foreground="{TemplateBinding Foreground}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Padding="2,0,2,0"
Margin="2,0,2,0"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
The LoopingSelectors themselves are in CustomDatePickerFlyoutPresenterStyle (see the primitives:MonochromaticOverlayPresenter definitions which reference DayLoopingSelector, etc.) but are actually instantiated in DatePicker code (which I don't have and can't find).
This XAML produces the tree shown in the original question when the DatePickerFlyout is open.
I want to change the background color of the selected item. I have tried the following solution but it didn't work.
<CollectionView x:Name="FlexCategoryType" Margin="0" HorizontalOptions="FillAndExpand" SelectionMode="Single" ItemsSource="{Binding ItemsCategory}" SelectedItem="{Binding SelectedCategory, Mode=TwoWay}" SelectionChanged="FlexCategoryType_SelectionChanged">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Label Text="{Binding Name}"/>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal" />
<VisualState Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Yellow" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
CollectionView SelectedItem is not highlighted in Xamarin Forms
Change background color of selected item in CollectionView not working on UWP
The problem is that you have not specific CollectionView SelectionMode, the default value is none. Please set it as Single. and add VisualStateGroups like the following
<CollectionView SelectionMode="Single">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Margin="10">
<Label Text="{Binding}" VerticalOptions="Center" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal" />
<VisualState Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Yellow" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<x:String>5</x:String>
</x:Array>
</CollectionView.ItemsSource>
</CollectionView>
Update
How to change ListView Cell selected color.
Here is FormsListViewItem style, please copy it to UWP App.xaml file and edit SelectedBackground as you want color.
For example
<Application.Resources>
<ResourceDictionary>
<Style x:Key="FormsListViewItem" TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="IsHoldingEnabled" Value="True" />
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />
<Setter Property="MinHeight" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
ContentMargin="{TemplateBinding Padding}"
CheckMode="Inline"
ContentTransitions="{TemplateBinding ContentTransitions}"
CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}"
SelectionCheckMarkVisualEnabled="True"
SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}"
SelectedBackground="SeaGreen"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
My GridView re-populated when the user chooses ComboBox item. The problem starts when the user scroll the gridView somewhere to to the middle of the gridview and when he chooses different item in the comboBox, what happens is thee scroll looks like it went to the start, but now when you try to move a bit right or left you see that the scroll position updated and appears where it has been at the moment when the user chose differnt combobox item. In addition, although the scroll appears for a second in the beginning, you can see that for this sec the gridview shows the middle-r groups (it's a grouped grid view).
So As mentioned above I want to reset gridview scrool position (to the start position) after the gridview populated.
Here is the the gridview belongings:
<GridView x:Name="GridGames"
Grid.Row="3"
Grid.Column="1"
Grid.ColumnSpan="2"
VerticalAlignment="Top"
IsItemClickEnabled="True"
ItemClick="OnGameClick"
ItemTemplate="{StaticResource listView}"
ItemsSource="{Binding Source={StaticResource viewSource}}"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.IsHorizontalScrollChainingEnabled="False"
ScrollViewer.IsVerticalScrollChainingEnabled="False"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollMode="Disabled">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="5,0,0,0">
<TextBlock FlowDirection="LeftToRight"
Style="{StaticResource eaderStyle}"
Text="{Binding Key}" />
</Grid>
<!-- <local:GroupHeader Width="800" Height="35" /> -->
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Margin="0,0,20,0" Orientation="Vertical" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</Grid>
And this in the local resources:
<Style TargetType="GridView">
<Setter Property="Padding" Value="0,0,0,10" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="TabNavigation" Value="Once" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
<Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" />
<Setter Property="IsSwipeEnabled" Value="True" />
<Setter Property="ItemContainerTransitions">
<Setter.Value>
<TransitionCollection>
<AddDeleteThemeTransition />
<ContentThemeTransition />
<ReorderThemeTransition />
<EntranceThemeTransition IsStaggeringEnabled="False" />
</TransitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<!--
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridView">
<ItemsPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
-->
</Style>
<Style TargetType="GridViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<Border x:Name="LayoutRoot"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver" />
<VisualState x:Name="Disabled" />
<VisualState x:Name="Pressed" />
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected" />
<VisualState x:Name="SelectedUnfocused" />
<VisualState x:Name="SelectedDisabled" />
<VisualState x:Name="SelectedPointerOver" />
<VisualState x:Name="SelectedPressed" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" />
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="InnerGrid" Background="Transparent">
<Rectangle x:Name="PressedBackground"
Fill="{StaticResource ListBoxItemPressedBackgroundThemeBrush}"
Opacity="0" />
<ContentPresenter x:Name="ContentPresenter"
Margin="0,0,5,5"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}" />
<Rectangle x:Name="FocusVisualWhite"
Opacity="0"
Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
StrokeDashArray="1,1"
StrokeDashOffset=".5"
StrokeEndLineCap="Square" />
<Rectangle x:Name="FocusVisualBlack"
Opacity="0"
Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
StrokeDashArray="1,1"
StrokeDashOffset="1.5"
StrokeEndLineCap="Square" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How do you (re)populate the gridview? Are you setting it to empty before repopulating? That might help.
e.g. try adding this before you set the source for the gridview after the user selects the combobox item:
GridGames.ItemsSource = Nothing
I'm trying to give a style I made in blend to a button that generates in the code. I tried the following but it doesn't seem to work. I also can't find any solutions online.
Here is the code.
private void createBtn()
{
Button btn = new Button();
btn.Name = buttonName;
btn.Style = popUpStyle;
btn.Margin = new Thickness(20);
btn.Content = "Close";
btn.Click += new RoutedEventHandler(btn_Click);
btn.Visibility = System.Windows.Visibility.Visible;
Canvas.Children.Add(btn);
}
And the xaml.
<Style x:Name="popUpStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
<Setter Property="Padding" Value="10,3,10,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="popUpStyleCT" TargetType="Button">
<Grid Background="Transparent" Height="150" Width="200">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Fill="#FFC2C2C2" Margin="0,15,0,0"/>
<Rectangle Fill="#FF313197" Height="15" Stroke="Black" VerticalAlignment="Top" Opacity="0.25"/>
<Rectangle Fill="#FFE20303" HorizontalAlignment="Right" Height="15" Stroke="Black" VerticalAlignment="Top" Width="30" Opacity="0.25"/>
<TextBlock HorizontalAlignment="Right" Height="15" TextWrapping="Wrap" Text="X" VerticalAlignment="Top" Width="14" FontSize="13.333" Margin="0,0,5,0"/>
<Rectangle Fill="#FF4D4A4A" Height="22" Margin="50,0,44,8" VerticalAlignment="Bottom" Stroke="Black"/>
<Border x:Name="ButtonBackground" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Margin="0,12,0,34">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Margin="-3,2,73,0" Foreground="Black" FontSize="13.333" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</Border>
<TextBlock Height="15" TextWrapping="Wrap" Text="Close" VerticalAlignment="Bottom" FontSize="13.333" Margin="85,0,81,12" Foreground="Black"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I think this answer on SL forum is what you've been searching for.
I want to add a header to my ListBoxes and I do this by using a template.
The problem is that if I extend the ListBox's template it seems that the listbox's virtualizingstackpanel doesn't work anymore as expected: it loads all content before I can scroll it.
I found some relevant questions in stackoverflow like this (VirtualizingStackPanel stops working when overriding the default control template for ScrollViewer) but the solution given there cannot be applied to WP7: I can't find the property named "CanContentScroll" of the scrollviewer.
my code
<Style x:Key="ListBoxStyle1" TargetType="ListBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="ScrollViewer"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Foreground="{TemplateBinding Foreground}"
Padding="{TemplateBinding Padding}">
<StackPanel>
<TextBlock Text="..."/>
<ItemsPresenter/>
</StackPanel>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
To be honest, I'm really not sure what the actual problem is here; the VirtualizingStackPanel is still in the visual tree, but it seems that none of the items actually added. Enough of the bad news, the good news is I've found a way to work round it, by changing the default style of the ScrollViewer to place the header there instead, which results in two styles that look like this:
<Style x:Key="ScrollViewerStyle1" TargetType="ScrollViewer">
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ScrollStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.5" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Scrolling">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="VerticalScrollBar"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<DoubleAnimation Storyboard.TargetName="HorizontalScrollBar"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="NotScrolling">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="{TemplateBinding Padding}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="Header" Style="{StaticResource PhoneTextLargeStyle}"/>
<ScrollContentPresenter x:Name="ScrollContentPresenter"
Grid.Row="1"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
<ScrollBar x:Name="VerticalScrollBar"
Grid.RowSpan="2"
IsHitTestVisible="False"
Opacity="0"
Height="Auto"
Width="5"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
IsTabStop="False"
Maximum="{TemplateBinding ScrollableHeight}"
Minimum="0"
Value="{TemplateBinding VerticalOffset}"
Orientation="Vertical"
ViewportSize="{TemplateBinding ViewportHeight}" />
<ScrollBar x:Name="HorizontalScrollBar"
Grid.RowSpan="2"
IsHitTestVisible="False"
Opacity="0"
Width="Auto"
Height="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
IsTabStop="False"
Maximum="{TemplateBinding ScrollableWidth}"
Minimum="0"
Value="{TemplateBinding HorizontalOffset}"
Orientation="Horizontal"
ViewportSize="{TemplateBinding ViewportWidth}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListBoxStyle2" TargetType="ListBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="ScrollViewer"
Grid.Row="1"
Style="{StaticResource ScrollViewerStyle1}"
Foreground="{TemplateBinding Foreground}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>