Change windowStyle of Prism Dialogwindow - prism

How can I change the window style dynamically via Trigger?
Like:
<Style TargetType="UserControl">
<Setter Property="prism:Dialog.WindowStyle" Value="{DynamicResource DefaultDialogStyleTheme}"></Setter>
<Style.Triggers>
<DataTrigger
Binding="{Binding SecondOne, UpdateSourceTrigger=PropertyChanged}"
Value="true">
<Setter Property="prism:Dialog.WindowStyle" Value="{DynamicResource DialogStyleTheme}"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>`

You can register your own IDialogWindow implementation that has all the styles you desire.
The library's implementation's code's here (xaml) and there (code-behind) as a reference.

Thanks for your help :), But for example before we switched to new Prism, we've used a PopupWindowAction to raise a default window or a custom window:
var wrapperWindow = GetWindow(args.Context);
wrapperWindow.ShowDialog();
GetWindow returns a Window or CustomWindowObject.
That's the custom window style:
<Style x:Key="DialogStyleTheme" TargetType="implementation:CustomDialogWindow">
<Setter Property="WindowStyle" Value="None" />
<Setter Property="ResizeMode" Value="CanMinimize" />
<Setter Property="SizeToContent" Value="WidthAndHeight" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="AllowsTransparency" Value="True" />
<Setter Property="FontSize" Value="60" />
<Setter Property="ShowInTaskbar" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="implementation:CustomDialogWindow">
<Border BorderThickness="2" CornerRadius="10" BorderBrush="White" Background="DimGray"
x:Name="MainBorder">
<Grid Background="{TemplateBinding Background}" Margin="5,5,5,5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="30" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="MoveGrid">
<Image x:Name="Image">
<Image.Style>
<Style TargetType="Image">
<Setter Property="Stretch" Value="UniformToFill" />
<Style.Triggers>
<DataTrigger Binding="{Binding SmallTitle}" Value="true">
<Setter Property="Height" Value="40" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<TextBlock Text="{Binding Title}">
<TextBlock.Style>
<Style BasedOn="{StaticResource TouchHeadTextBlock}" TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding SmallTitle}" Value="true">
<Setter Property="FontSize" Value="25" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
<ContentPresenter Grid.Row="2" x:Name="ContentPresenter" ClipToBounds="True" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And I'm setting the WindowStyle in my UserControl and I want to change this style via trigger....
prism:Dialog.WindowStyle="{DynamicResource DialogStyleTheme}"
Initialization:
containerRegistry.RegisterDialog<ItemSelectionDialogView, ItemSelectionDialogViewModel>();
containerRegistry.RegisterDialogWindow<CustomDialogWindow>();

Related

Examine PopupRoot in Live Visual Tree viewer for WinUI 3 apps in VS 2022?

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.

Change background color of selected item in CollectionView not working on UWP

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>

No XAML designer preview with custom ChromeWindow

I've been trying to build a custom chrome window vs a window with no border style.
In Visual Studio, the XAML designer is showing the custom title bar in the content area, and the actual content area controls aren't visible. When I compile and run it, everything looks correct.
One other side problem was I can't seem to get the Command binding on the titlebar buttons correct. I tried binding them to the appropriate SystemCommands but I'm not sure what I'm doing wrong there either. So instead I just added click event handlers and do the code there. Was just trying for a XAML only solution for that. The Click event handlers work correctly.
Below is my XAML. At the end of the XAML is a basic Grid with a TextBlock that says "I should be visible!" but it isn't in the designer.
Also attached (if I have the permissions to do so) is a screenshot of what the designer looks like in my Visual Studio. As you can see the controls I placed in the custom title bar are clearly visible. You'll also see in the screenshot that the default windows title bar is also visible.
Can anyone point me in the right direction as to why my designer isn't WYSIWYG?
<Window x:Class="Window1"
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:local="clr-namespace:ChromeWindowTest"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Name="Window1"
Title="Window1"
Width="800"
Height="450"
Background="#252525"
Foreground="White"
mc:Ignorable="d">
<WindowChrome.WindowChrome>
<WindowChrome CornerRadius="0"
GlassFrameThickness="0,0,0,1"
NonClientFrameEdges="None"
ResizeBorderThickness="5"
UseAeroCaptionButtons="True" />
</WindowChrome.WindowChrome>
<Window.Resources>
<local:WindowStateToMarginConverter x:Key="WindowStateToMarginConverter" />
<local:WindowStateToVisibilityConverter x:Key="WindowStateToVisibilityConverter" />
<Style TargetType="TextBlock">
<Setter Property="Foreground"
Value="White" />
<Setter Property="FontFamily"
Value="Lucida Sans Unicode" />
<Setter Property="FontSize"
Value="12 pt" />
<Setter Property="Margin"
Value="3,0" />
</Style>
<Style x:Key="CaptionButtonStyle"
TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="LayoutRoot"
Width="44"
Height="30"
Background="Transparent"
WindowChrome.IsHitTestVisibleInChrome="True">
<TextBlock x:Name="txt"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="Segoe MDL2 Assets"
FontSize="10"
Foreground="White"
RenderOptions.ClearTypeHint="Auto"
Text="{TemplateBinding Content}"
TextOptions.TextFormattingMode="Display"
TextOptions.TextRenderingMode="Aliased" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="LayoutRoot"
Property="Background"
Value="#F79721" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MinimizeButtonStyle"
BasedOn="{StaticResource CaptionButtonStyle}"
TargetType="Button">
<Setter Property="Content"
Value="" />
</Style>
<Style x:Key="MaximizeButtonStyle"
BasedOn="{StaticResource CaptionButtonStyle}"
TargetType="Button">
<Setter Property="Content"
Value="" />
<Setter Property="Visibility"
Value="{Binding WindowState,
Converter={StaticResource WindowStateToVisibilityConverter},
ConverterParameter=0}" />
</Style>
<Style x:Key="RestoreButtonStyle"
BasedOn="{StaticResource CaptionButtonStyle}"
TargetType="Button">
<Setter Property="Content"
Value="" />
<Setter Property="Visibility"
Value="{Binding WindowState,
Converter={StaticResource WindowStateToVisibilityConverter},
ConverterParameter=2}" />
</Style>
<Style x:Key="CloseButtonStyle"
TargetType="Button">
<Setter Property="Content"
Value="" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="LayoutRoot"
Width="44"
Height="30"
Background="Transparent"
WindowChrome.IsHitTestVisibleInChrome="True">
<TextBlock x:Name="txt"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="Segoe MDL2 Assets"
FontSize="10"
Foreground="White"
RenderOptions.ClearTypeHint="Auto"
Text="{TemplateBinding Content}"
TextOptions.TextFormattingMode="Display"
TextOptions.TextRenderingMode="Aliased" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="LayoutRoot"
Property="Background"
Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Window.Template>
<ControlTemplate TargetType="{x:Type Window}">
<Grid Background="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Background}">
<StackPanel Height="32"
Margin="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=WindowState,
Converter={StaticResource WindowStateToMarginConverter}}"
VerticalAlignment="Top"
Orientation="Horizontal">
<Button HorizontalAlignment="Left"
VerticalAlignment="Top"
Click="Icon_Click"
WindowChrome.IsHitTestVisibleInChrome="True">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<ContentPresenter />
</Grid>
</ControlTemplate>
</Button.Template>
<Image Width="32"
Height="32"
Source="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Icon}"
WindowChrome.IsHitTestVisibleInChrome="True" />
</Button>
<StackPanel Orientation="Vertical">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="10 pt"
LineHeight="16"
LineStackingStrategy="BlockLineHeight"
Text="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Title}" />
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="10 pt"
LineHeight="16"
LineStackingStrategy="BlockLineHeight"
Text="{Binding Path=SubTitle}" />
</StackPanel>
</StackPanel>
<Button x:Name="btn"
Margin="3"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Click="btn_Click"
Content="Placeholder"
WindowChrome.IsHitTestVisibleInChrome="True" />
<StackPanel HorizontalAlignment="Right"
VerticalAlignment="Top"
Orientation="Horizontal">
<Button x:Name="MinimizeButton"
Click="MinimizeButton_Click"
Style="{DynamicResource MinimizeButtonStyle}" />
<Button x:Name="MaximizeButton"
Click="MaximizeButton_Click"
Style="{DynamicResource MaximizeButtonStyle}" />
<Button x:Name="RestoreButton"
Click="MaximizeButton_Click"
Style="{DynamicResource RestoreButtonStyle}" />
<Button x:Name="CloseButton"
Click="CloseButton_Click"
Style="{DynamicResource CloseButtonStyle}" />
</StackPanel>
<ContentPresenter Content="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType=Window},
Path=Content}" />
</Grid>
</ControlTemplate>
</Window.Template>
<Grid Margin="0,35,0,0">
<TextBlock Text="I should be visible!" />
</Grid>
I figured it out by accident.
In case anyone else happens across this post with a similar problem.
The following bit of code was wrong:
<ContentPresenter Content="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType=Window},
Path=Content}" />
The correct code is either just an empty ContentPresenter or the MSDN example for ChromeWindow of:
<ContentPresenter Content="{TemplateBinding Content}" />
No binding seemed to work fine as well.
Also, my original code above, I should probably have the content presenter as the first item in the Grid so that content doesn't obscure the title bar. I had there originally, but I moved it to the last entry to see if the reason I was seeing only the title bar was because of z-order.

How to format Time in TimePickerControl in Windows Phone 8.1?

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>

adding a header to a listbox's scrollviewer and keeping the virtualizingStackPanel (wp7)

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>

Resources