In silverlight the context menu used to have a property IsZoomEnabled that use to define whether zoom out effect will be there when ContextMenu shows up but in winrt xaml we have MenuFlyout which does not have any such property. How should I disable this effect?
Here is the default template for MenuFlyout
<!-- Default style for Windows.UI.Xaml.Controls.MenuFlyoutPresenter -->
<Style TargetType="MenuFlyoutPresenter">
<Setter Property="RequestedTheme" Value="Light" />
<Setter Property="Background" Value="{ThemeResource FlyoutBackgroundThemeBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource FlyoutBorderThemeBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource FlyoutBorderThemeThickness}" />
<Setter Property="Padding" Value="{ThemeResource MenuFlyoutPresenterThemePadding}" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
<Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
<Setter Property="MaxWidth" Value="{ThemeResource FlyoutThemeMaxWidth}" />
<Setter Property="MinHeight" Value="{ThemeResource FlyoutThemeMinHeight}" />
<Setter Property="MaxHeight" Value="{ThemeResource FlyoutThemeMaxHeight}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuFlyoutPresenter">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer Padding="{TemplateBinding Padding}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
AutomationProperties.AccessibilityView="Raw">
<ItemsPresenter />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can't accomplish this in WinRT. You can create your own UserControl or replicate the behavior of a MenuFlyout using only a Flyout. Try this tutorial if you want to do something like this.
Related
When I set Height or Width, the transitions do not work;
<Style Selector="lib|BarButtonItem.ImageButtonStyle">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Width" Value="16" />
<Setter Property="Height" Value="16" />
<Setter Property="Template">
<ControlTemplate>
<Grid>
<Border Name="Border"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}" />
<Image Source="{TemplateBinding ImageSource}"
ToolTip.Tip="{TemplateBinding Tip}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}" />
</Grid>
</ControlTemplate>
</Setter>
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Width" Duration="0:0:0.2" />
<DoubleTransition Property="Height" Duration="0:0:0.2"/>
</Transitions>
</Setter>
</Style>
<Style Selector="lib|BarButtonItem.ImageButtonStyle:pointerover">
<Setter Property="Width" Value="20" />
<Setter Property="Height" Value="20" />
</Style>
I set width to 20, height to 20, it`s width or height not change when mouse in BarButtonItem
I am planning to show a list of objects using ListView. According to the design when an Item is selected a blue line should appear in the content of the Item. I have written the below code and tried to change the visibility to visible (search for ----------Setting visibility Here in second code snippet) in Style of the ListViewItem defined as below. But doing so its throwing error. And I am not able to access the BlueLine object in the code behind when an ListViewItem is selected. Can you please help how this can be achieved. TIA
<ListView
x:Name="ObjectList"
ItemsSource="{x:Bind ObjectViewModel.Objects}"
SelectionChanged="ListViewButtonClick"
MaxWidth ="{StaticResource ColumnMaximumWidth}"
VerticalAlignment = "Center"
HorizontalContentAlignment = "Stretch"
ScrollViewer.HorizontalScrollBarVisibility ="Disabled"
SelectionMode ="Single" />
<ListView.Resources>
<SolidColorBrush x:Key="ListViewItemBackgroundSelected" Color="Green" />
<SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver" Color="Green" />
</ListView.Resources>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Margin" Value="0,0,0,30" />
</Style>
</ListView.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="local:ObjectModel">
<Grid MinHeight="66" CornerRadius="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Line
x:Name="BlueLine"
Stroke="Blue"
StrokeThickness="4"
Visibility="Collapsed"
X1="0"
X2="0"
Y1="0"
Y2="60" />
<FontIcon
Grid.Column="1"
FontSize="17"
Glyph=""
Style="{StaticResource FontIconStyle1}" />
<TextBlock
Grid.Column="2"
Style="{StaticResource AddBluetoothLabelTextStyle}"
Text="{x:Bind ObjectName, Mode=OneWay}" />
</Grid>
</ItemsControl.ItemTemplate>
</ListView>
<Style TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="{ThemeResource ListViewItemBackground}" />
<Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="IsHoldingEnabled" Value="True" />
<Setter Property="Padding" Value="12,0,12,0" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />
<Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}" />
<Setter Property="AllowDrop" Value="False" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="FocusVisualMargin" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
x:Name="Root"
Margin="0,0,0,30"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
CheckBrush="{ThemeResource ListViewItemCheckBrush}"
CheckMode="{ThemeResource ListViewItemCheckMode}"
ContentMargin="{TemplateBinding Padding}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Control.IsTemplateFocusTarget="True"
CornerRadius="4"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragBackground="{ThemeResource ListViewItemDragBackground}"
DragForeground="{ThemeResource ListViewItemDragForeground}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
RevealBackground="{ThemeResource ListViewItemRevealBackground}"
RevealBorderBrush="{ThemeResource ListViewItemRevealBorderBrush}"
RevealBorderThickness="{ThemeResource ListViewItemRevealBorderThemeThickness}"
SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}"
SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}"
SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}"
SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected"> ----------Setting visibility Here
<VisualState.Setters>
<Setter Target="BlueLine.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOverSelected">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOverPressed">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
<Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
<Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PressedSelected">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
<Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DisabledStates">
<VisualState x:Name="Enabled" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="Root.RevealBorderThickness" Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ListViewItemPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
There is an approach could be used to access the BlueLine object in code behind when a ListViewItem is selected by using VisualTreeHelper class.
Please check the following code:
Add headers and namespaces:
#include <winrt/Windows.UI.Xaml.Shapes.h>
#include <winrt/Windows.UI.Xaml.Media.h>
using namespace winrt::Windows::UI::Xaml::Shapes;
using namespace Windows::UI::Xaml::Media;
Add a private member in .h file:
private:
Line previousLine{ nullptr };
Access the BlueLine object in code behind:
void winrt::ListViewStyle::implementation::MainPage::ObjectList_SelectionChanged(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::Controls::SelectionChangedEventArgs const& e)
{
if (previousLine != nullptr)
{
previousLine.Visibility(Visibility::Collapsed);
}
auto selectedItemContainer = ObjectList().ContainerFromItem(ObjectList().SelectedItem());
auto presenter = VisualTreeHelper::GetChild(selectedItemContainer.try_as<DependencyObject>(), 0);
auto grid = VisualTreeHelper::GetChild(presenter, 0);
auto line = VisualTreeHelper::GetChild(grid, 0).try_as<Line>();
line.Visibility(Visibility::Visible);
previousLine = line;
}
I recently downloaded Wox, an alternative search for Windows. Its search automatically appears as a dropdown menu. There is no way in the settings to change this to "dropup" rather than dropdown. I couldn't find this question asked anywhere, but the maker said in response to a question about a different change to appearance to edit the base theme document. I looked through the document, and couldn't find anywhere that seemed like an obvious place to toggle if the dropbox falls up or down, but I also only have very basic coding knowledge. I tried to search for how to do this online, but couldn't seem to find anything. The markup document is below. Is there anything I can change in this to cause it to drop up instead?
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:system="clr-namespace:System;assembly=mscorlib">
<Style x:Key="BaseQueryBoxStyle" TargetType="{x:Type TextBox}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="FontSize" Value="28" />
<Setter Property="FontFamily" Value="Segoe UI, Microsoft YaHei" />
<Setter Property="FontWeight" Value="Medium" />
<Setter Property="Height" Value="30" />
<Setter Property="Background" Value="#616161" />
<Setter Property="Foreground" Value="#E3E0E3" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Stylus.IsFlicksEnabled" Value="False" />
</Style>
<Style x:Key="BaseWindowBorderStyle" TargetType="{x:Type Border}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="CornerRadius" Value="0" />
<Setter Property="Background" Value="#424242"></Setter>
<Setter Property="Padding" Value="4 4 4 4" />
</Style>
<Style x:Key="BaseWindowStyle" TargetType="{x:Type Window}">
<Setter Property="Width" Value="350" />
<Setter Property="MaxWidth" Value="800" />
</Style>
<Style x:Key="BasePendingLineStyle" TargetType="{x:Type Line}">
<Setter Property="Stroke" Value="Blue" />
</Style>
<!-- Item Style -->
<Style x:Key="BaseItemTitleStyle" TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="#FFFFF8" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="Medium" />
<Setter Property="FontFamily" Value="Segoe UI, Microsoft YaHei" />
</Style>
<Style x:Key="BaseItemSubTitleStyle" TargetType="{x:Type TextBlock}" >
<Setter Property="Foreground" Value="#D9D9D4" />
<Setter Property="FontFamily" Value="Segoe UI, Microsoft YaHei" />
</Style>
<Style x:Key="BaseItemNumberStyle" TargetType="{x:Type TextBlock}">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Margin" Value="3 0 0 0" />
<Setter Property="FontSize" Value="22" />
</Style>
<Style x:Key="BaseItemTitleSelectedStyle" TargetType="{x:Type TextBlock}" >
<Setter Property="Foreground" Value="#FFFFF8" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="Medium" />
</Style>
<Style x:Key="BaseItemSubTitleSelectedStyle" TargetType="{x:Type TextBlock}" >
<Setter Property="Foreground" Value="#D9D9D4" />
</Style>
<Style x:Key="BaseListboxStyle" TargetType="{x:Type ListBox}">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer Focusable="false" Template="{DynamicResource ScrollViewerControlTemplate}">
<VirtualizingStackPanel IsItemsHost="True" />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ScrollViewer Style -->
<ControlTemplate x:Key="ScrollViewerControlTemplate" TargetType="{x:Type ScrollViewer}">
<Grid x:Name="Grid" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!--content in the left of ScrollViewer, just default-->
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
CanContentScroll="{TemplateBinding CanContentScroll}"
CanHorizontallyScroll="False"
CanVerticallyScroll="False"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Grid.Column="0"
Margin="{TemplateBinding Padding}"
Grid.Row="0" />
<!--Scrollbar in thr rigth of ScrollViewer-->
<ScrollBar x:Name="PART_VerticalScrollBar"
AutomationProperties.AutomationId="VerticalScrollBar"
Cursor="Arrow"
Grid.Column="1"
Margin="3 0 0 0"
Maximum="{TemplateBinding ScrollableHeight}"
Minimum="0"
Grid.Row="0"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
ViewportSize="{TemplateBinding ViewportHeight}"
Style="{DynamicResource ScrollBarStyle}" />
</Grid>
</ControlTemplate>
<!-- button style in the middle of the scrollbar -->
<Style x:Key="BaseThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border CornerRadius="2" DockPanel.Dock="Right" Background="#616161" BorderBrush="Transparent" BorderThickness="0" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="BaseScrollBarStyle" TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false" />
<Setter Property="Stylus.IsFlicksEnabled" Value="false" />
<!-- must set min width -->
<Setter Property="MinWidth" Value="0"/>
<Setter Property="Width" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<DockPanel>
<Track x:Name="PART_Track" IsDirectionReversed="true" DockPanel.Dock="Right">
<Track.Thumb>
<Thumb Style="{DynamicResource ThumbStyle}"/>
</Track.Thumb>
</Track>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Here is an MSDN example for changing ComboBox's ControlTemplate: https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/combobox-styles-and-templates
The interesting part is Popup:
<Popup x:Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
Changing Placement to Top should help.
I would like to add a bit of reveal highlight in my app to my pivot headers. But I'm not getting there
Below is my Style for the Pivot
<Style x:Key="PivotStyle1" TargetType="Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Background" Value="{ThemeResource PivotBackground}"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Pivot">
<Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.Resources>
<Style x:Key="BaseContentControlStyle" TargetType="ContentControl">
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
OpticalMarginAlignment="TrimSideBearings"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TitleContentControlStyle" TargetType="ContentControl" >
<Setter Property="FontWeight" Value="SemiLight"/>
<Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}"/>
</Style>
<Style TargetType="PivotHeaderItem">
<Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" />
<Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" />
<Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" />
<Setter Property="Margin" Value="{ThemeResource PivotHeaderItemMargin}" />
<Setter Property="Height" Value="32" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="BorderBrush" Value="PaleGreen" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="PivotHeaderItem">
<Border x:Name="Grid"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="2,2,2,2"
Padding="16,0,16,0"
Margin="0"
>
<Border.Resources>
<Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter">
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="LineStackingStrategy" Value="MaxHeight"/>
<Setter Property="TextLineBounds" Value="Full"/>
<Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
</Style>
<Style x:Key="BodyContentPresenterStyle" TargetType="ContentPresenter" BasedOn="{StaticResource BaseContentPresenterStyle}">
<Setter Property="FontWeight" Value="SemiLight"/>
<Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}"/>
</Style>
</Border.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Unselected" To="UnselectedLocked" GeneratedDuration="0:0:0.33" />
<VisualTransition From="UnselectedLocked" To="Unselected" GeneratedDuration="0:0:0.33" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unselected" />
<VisualState x:Name="UnselectedLocked">
</VisualState>
<VisualState x:Name="Selected">
</VisualState>
<VisualState x:Name="UnselectedPointerOver">
</VisualState>
<VisualState x:Name="SelectedPointerOver">
<VisualState.Setters>
<Setter Target="Grid.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="Grid.Background" Value="{ThemeResource ButtonRevealBackgroundPointerOver}" />
<Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ButtonRevealBorderBrush}"/>
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="UnselectedPressed">
</VisualState>
<VisualState x:Name="SelectedPressed">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter
x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Style="{StaticResource BodyContentPresenterStyle}">
<ContentPresenter.RenderTransform>
<TranslateTransform x:Name="ContentPresenterTranslateTransform" />
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
{... add here stuff from the standard template ... }
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If I hover over the selected Header the background changes, but it's a flat color and like in the NavigationView/Listview. The BorderBrush changes his color too, but there is no shading.
P.S.: How could I modify the Style to be API aware. If the user fas the FCU user Reveal Highlight, if not use flat colors...
Update
The effect is very subtile and hardly visible. Is there a possibility to make the effect stronger?
how can I expand the effect, so that all headers are included. For know the effect is limited to one header only... in navigation view the effect spread to other lines as well
Many thanks for your help
The Reveal is a lighting effect that helps bring depth and focus to your app's interactive elements. It seems you have implement the Reveal effect of the PivotItem, you can set your Pivot with a high Contrast background to see it, such as LightGray.
If you want the BorderBrush changes his color with shading, you should change your Xaml of the SelectedPointerOver VisualState in your code as the following that to change the Grid Border brush but not the ContentPresenter,
<VisualState x:Name="SelectedPointerOver">
<VisualState.Setters>
<Setter Target="Grid.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="Grid.Background" Value="{ThemeResource ButtonRevealBackgroundPointerOver}" />
<Setter Target="Grid.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushPointerOver}"/>
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPointerOver}" />
</VisualState.Setters>
</VisualState>
You can also create a new MyRevealBorderBrush with a x:Key, a Color, an Opacity (optional), and a FallbackColor to use it in your Xaml.
<RevealBackgroundBrush x:Key="MyRevealBorderBrush" Color="PaleGreen" Opacity= "0.5" FallbackColor="PaleGreen"/>
Then you can use it in the VisualState,
<VisualState.Setters>
<Setter Target="Grid.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="Grid.Background" Value="{ThemeResource ButtonRevealBackgroundPointerOver}" />
<Setter Target="Grid.BorderBrush" Value="{StaticResource MyRevealBorderBrush}"/>
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonRevealBackgroundPointerOver}" />
</VisualState.Setters>
As for modifying the Style to be API aware, you can look into this document :
https://learn.microsoft.com/en-us/windows/uwp/debug-test-perf/conditional-xaml#use-ifelse-conditions
-----Update----
To implement the similar effect, you should add the setters in the UnselectedPointerOver VisualState in your PivotHeaderItem style,
<VisualState x:Name="UnselectedPointerOver">
<VisualState.Setters>
<Setter Target="Grid.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="Grid.Background" Value="{ThemeResource ButtonRevealBackgroundPointerOver}" />
<Setter Target="Grid.BorderBrush" Value="{StaticResource MyRevealBorderBrush}"/>
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPointerOver}" />
</VisualState.Setters>
</VisualState>
As for the colors, you should try what you want. For the NavigationView, it should uses the NavigationViewItemBorderBrushPointerOver ThemeResource. You can also try it to see the effect.
<Setter Target="Grid.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushPointerOver}"/>
I want to display flyout-panel on the right side of my page and this panel must have the full height of the page.
Here is a XAML:
<Button Content="One" Grid.Column="0" Click="Button_Click_1" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" />
<Button x:Name="TestButton" Content="TestButton" Grid.Column="1" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
<Button.Flyout>
<Flyout>
<StackPanel x:Name="FlyoutPanel" Margin="0 0 0 0">
<TextBlock>Some text</TextBlock>
<Button Click="Button_Click">Press me</Button>
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
<StackPanel x:Name="FlyoutPlacement" Grid.Column="2" Margin="0 0 0 0"/>
And here is a code to display the flyout panel on the right side of my page:
private void Button_Click_1(object sender, RoutedEventArgs e)
{
FlyoutPanel.Height = Window.Current.Bounds.Height;
FlyoutPlacement.Height = Window.Current.Bounds.Height;
TestButton.Flyout.ShowAt(FlyoutPlacement);
}
Now my flyout-panel have a vertical scrollbar and the size which is smaller then the page size. How can I remove scrollbar and set the flyout-panel the full page size?
You need to edit the default FlyoutPresenterStyle:
<SolidColorBrush x:Key="FlyoutBackgroundThemeBrush" Color="#FF000000"/>
<SolidColorBrush x:Key="FlyoutBorderThemeBrush" Color="#FFFFFFFF"/>
<x:Double x:Key="FlyoutThemeMaxHeight">718</x:Double> <!-- Change to NaN -->
<x:Double x:Key="FlyoutThemeMaxWidth">450</x:Double> <!-- Change to NaN -->
<x:Double x:Key="FlyoutThemeMinHeight">54</x:Double>
<x:Double x:Key="FlyoutThemeMinWidth">70</x:Double>
<Thickness x:Key="FlyoutBorderThemeThickness">2</Thickness>
<Thickness x:Key="FlyoutContentThemePadding">20,17,20,20</Thickness> <!-- Change to 0 -->
<Style x:Key="FlyoutStyle" TargetType="FlyoutPresenter">
<Setter Property="RequestedTheme" Value="Light" />
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Background" Value="{ThemeResource FlyoutBackgroundThemeBrush}"/>
<Setter Property="BorderBrush" Value="{ThemeResource FlyoutBorderThemeBrush}"/>
<Setter Property="BorderThickness" Value="{ThemeResource FlyoutBorderThemeThickness}"/>
<Setter Property="Padding" Value="{ThemeResource FlyoutContentThemePadding}"/>
<Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}"/>
<Setter Property="MaxWidth" Value="{ThemeResource FlyoutThemeMaxWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource FlyoutThemeMinHeight}"/>
<Setter Property="MaxHeight" Value="{ThemeResource FlyoutThemeMaxHeight}"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" /> <!-- Change to Hidden -->
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="FlyoutPresenter">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer x:Name="ScrollViewer"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
AutomationProperties.AccessibilityView="Raw">
<ContentPresenter Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The main resources for your problem are FlyoutThemeMaxHeight, FlyoutThemeMaxWidth and FlyoutContentThemePadding. You need to set the max values to a very big number like I have put it for example NaN.
Then you set it as the FlyoutPresenterStyle:
<Flyout FlyoutPresenterStyle="{StaticResource FlyoutStyle}">
Also to hide the vertical scroll bar set ScrollViewer.VerticalScrollBarVisibility to Hidden.