xamluwpxamarin.formswindows-10-universalmaster-detail
How to change the style of Page Button in Master-Detail Page for UWP
I want to style the Page Button in UWP for a master detail page. With the help of the Live Visual Tree I found out that it should be the ContentTogglePane button.
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" Background="{TemplateBinding ToolbarBackground}" >
<Button Name="ContentTogglePane" Style="{ThemeResource PaneButton}" Foreground="{TemplateBinding ToolbarForeground}"
Visibility="{TemplateBinding ContentTogglePaneButtonVisibility}" />
<Border Height="{ThemeResource TitleBarHeight}" Visibility="{TemplateBinding DetailTitleVisibility}">
<TextBlock Text="{TemplateBinding DetailTitle}" VerticalAlignment="Center" Margin="10,0,0,0" Foreground="{TemplateBinding ToolbarForeground}" Style="{ThemeResource TitleTextBlockStyle}" />
</Border>
</StackPanel>
The style is defined in this way:
<Style TargetType="Button" x:Key="PaneButton">
<Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
<Setter Property="FontSize" Value="20" />
<Setter Property="Height" Value="48" />
<Setter Property="Width" Value="48" />
<Setter Property="Content" Value="" />
</Style>
I've tried to modify the default button style and all other button changes except the ContentTogglePane button. I want to remove the border and change the text color on hover as well as the background.
Which style do I have to overwrite to accomplish this? Ideally, only the ContentTogglePane button is overwritten.
Solution
I want to remove the border and change the text color on hover as well as the background.
I think you've found the default template style of MasterDetailControl and PaneButton, then you can copy them into the App.xaml file of the UWP project (aka. Application resource of UWP app). Since you want to change the style when the button is on hover, we still need the default Button styles and templates, copy the <Setter Property="Template">...</Setter> part into the style for PaneButton. The "on hover" behavior is controlled by <VisualState x:Name="PointerOver"> in the default button style.
All needed resources is now in application resource, we can simply modify them as we did in standard UWP app. For example:
<Application
x:Class="MasterDetailPageNavigation.UWP.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MasterDetailPageNavigation.UWP"
xmlns:uwp="using:Xamarin.Forms.Platform.UWP"
RequestedTheme="Light">
<Application.Resources>
<Style TargetType="Button" x:Key="CustomePaneButton">
<Setter Property="FontFamily" Value="{StaticResource SymbolThemeFontFamily}" />
<Setter Property="FontSize" Value="20" />
<Setter Property="Height" Value="48" />
<Setter Property="Width" Value="48" />
<Setter Property="Content" Value="" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="Wheat" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Wheat" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<x:Double x:Key="TitleBarHeight">48</x:Double>
<Style TargetType="uwp:MasterDetailControl">
<Setter Property="ToolbarForeground" Value="{ThemeResource DefaultTextForegroundThemeBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="uwp:MasterDetailControl">
<SplitView x:Name="SplitView" IsPaneOpen="{Binding IsPaneOpen,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay}" DisplayMode="Overlay">
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" Visibility="{TemplateBinding MasterToolbarVisibility}" Background="{TemplateBinding ToolbarBackground}">
<Button Name="PaneTogglePane" Style="{StaticResource CustomePaneButton}" Foreground="{TemplateBinding ToolbarForeground}" />
<TextBlock Style="{ThemeResource TitleTextBlockStyle}" VerticalAlignment="Center" Text="{TemplateBinding MasterTitle}" Visibility="{TemplateBinding MasterTitleVisibility}" Foreground="{TemplateBinding ToolbarForeground}" />
</StackPanel>
<ContentPresenter x:Name="MasterPresenter" Grid.Row="1" Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Master}" />
</Grid>
</SplitView.Pane>
<SplitView.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<uwp:FormsCommandBar x:Name="CommandBar" Grid.Row="0" Foreground="{TemplateBinding ToolbarForeground}" Background="{TemplateBinding ToolbarBackground}" Visibility="{TemplateBinding DetailTitleVisibility}" VerticalContentAlignment="Top">
<uwp:FormsCommandBar.Content>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Button Name="ContentTogglePane" Style="{StaticResource CustomePaneButton}" Foreground="{TemplateBinding ToolbarForeground}" Visibility="{Binding ElementName=SplitView,Path=IsPaneOpen,Converter={StaticResource InvertedBoolVisibilityConverter}}" />
<ContentControl VerticalAlignment="Top" VerticalContentAlignment="Center" Height="{StaticResource TitleBarHeight}">
<TextBlock Text="{TemplateBinding DetailTitle}" Margin="10,0,0,0" Foreground="{TemplateBinding ToolbarForeground}" Style="{ThemeResource TitleTextBlockStyle}" />
</ContentControl>
</StackPanel>
</uwp:FormsCommandBar.Content>
</uwp:FormsCommandBar>
<ContentPresenter x:Name="DetailPresenter" Grid.Row="1" Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Detail}" />
</Grid>
</SplitView.Content>
</SplitView>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>
Here is the rendering image of this style:
- Avalonia Center An Element Inside a Canvas Inside an ItemsRepeater
- Set Visibility true or false for 2 elements using dependency property
- Displaying a PDF in a WPF Application Not Working - WebBrowser or Adobe Control
- WPF, MVVM and PRISM - No Parameterless Constructor defined for this object
- Custom control that is on top of main window
- How can I fix using Power Shell and WPF windows, setting the text property of a textblock is failing with "Array index was null" with a complex DOM
- Avalonia logo could not be found
- TextBox expanding with surrounding Grid but not with text
- Docking and Anchoring is missing
- How bind a command in DataTemplate in Resource Dictionary?
- What is the value-binding syntax in xaml?
- TextBlock not wrapping in Grid
- How to Extract Default Control Template In Visual Studio?
- Binding default value to visibility if default value is null in ViewModel
- New .Net MAUI App project throws 'The name 'InitializeComponent' does not exist in the current context' build errors
- Setting NavigationCacheMode on page causes System.StackOverflowException with CallWindowProc
- Can you have more then one line in one DisplayAlert?
- How to bind index of current page of ItemsRepeater in WinUI 3?
- .NET MAUI System.ObjectDisposedException: 'Cannot access a disposed object. Object name: 'Microsoft.Maui.Platform.LayoutViewGroup'.'
- XAML Binding of a property of an object from a collection using a static enum key
- Avalonia UI use Button.myclass:pointerover to override Button:pointerover
- Why is the WPF Designer not picking up my code changes to my Control Library at design time?
- How to change the stringformat of Oxyplot track value?
- UWP or WinUI3: Is there a way to send a notification before the app first launch?
- How to zoom and center on double click in Image in WinUI 3?
- MAUI ImageButton click event works in Android app but not in Windows app
- Create a grid of controls that share one event handler that can get the button's position
- How to add binding property to Label with converter BoolToObjectConverter
- Convert an image to XAML?
- How can I change the height of the NavigationView Header?