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
Related
How can I cause the DataGrid column headers to be centered instead of left-aligned?
In particular, I want to center just the 3rd column.
(I used to use DNOA!). Anyway ... here you go.
If memory serves this is more or less the default style, I think I've pulled out any of my specifics so should just drop in to your application. Remember to pull in the Default DataGrid styles first.
<FluentTheme Mode="Dark" />
<StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml"/>
Style code
<Style Selector="DataGridColumnHeader">
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Focusable" Value="False" />
<Setter Property="SeparatorBrush" Value="{DynamicResource DataGridGridLinesBrush}" />
<Setter Property="Padding" Value="12,0,0,0" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="Template">
<ControlTemplate>
<Grid Name="PART_ColumnHeaderRoot"
ColumnDefinitions="*,Auto"
Background="{TemplateBinding Background}">
<Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition MinWidth="32"
Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
<Path Name="SortIcon"
Grid.Column="1"
Fill="{DynamicResource SampleSortOrange}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="Uniform"
Height="12" />
</Grid>
<Rectangle Name="VerticalSeparator"
Grid.Column="1"
Width="1"
VerticalAlignment="Stretch"
Fill="{TemplateBinding SeparatorBrush}"
IsVisible="{TemplateBinding AreSeparatorsVisible}" />
<Grid x:Name="FocusVisual"
IsHitTestVisible="False">
<Rectangle x:Name="FocusVisualPrimary"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="Transparent"
IsHitTestVisible="False"
Stroke="{DynamicResource DataGridCellFocusVisualPrimaryBrush}"
StrokeThickness="2" />
<Rectangle x:Name="FocusVisualSecondary"
Margin="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="Transparent"
IsHitTestVisible="False"
Stroke="{DynamicResource DataGridCellFocusVisualSecondaryBrush}"
StrokeThickness="1" />
</Grid>
</Grid>
</ControlTemplate>
</Setter>
</Style>
<!-- Selected Row Background -->
<Style Selector="DataGridRow:selected /template/ Rectangle#BackgroundRectangle">
<Setter Property="Fill" Value="{DynamicResource SampleSortOrange}" />
<Setter Property="Opacity" Value="0.3" />
</Style>
<!-- <Style Selector="DataGridRow:selected /template/ ContentPresenter"> -->
<!-- <Setter Property="TextBlock.Foreground" Value="Black" /> -->
<!-- </Style> -->
<Style Selector="DataGridColumnHeader /template/ Grid#FocusVisual">
<Setter Property="IsVisible" Value="False" />
</Style>
<Style Selector="DataGridColumnHeader:focus-visible /template/ Grid#FocusVisual">
<Setter Property="IsVisible" Value="True" />
</Style>
<Style Selector="DataGridColumnHeader:pointerover /template/ Grid#PART_ColumnHeaderRoot">
<Setter Property="Background" Value="{DynamicResource DataGridColumnHeaderHoveredBackgroundColor}" />
</Style>
<Style Selector="DataGridColumnHeader:pressed /template/ Grid#PART_ColumnHeaderRoot">
<Setter Property="Background" Value="{DynamicResource DataGridColumnHeaderPressedBackgroundColor}" />
</Style>
<Style Selector="DataGridColumnHeader:dragIndicator">
<Setter Property="Opacity" Value="0.5" />
</Style>
<Style Selector="DataGridColumnHeader /template/ Path#SortIcon">
<Setter Property="IsVisible" Value="False" />
</Style>
<Style Selector="DataGridColumnHeader:sortascending /template/ Path#SortIcon">
<Setter Property="IsVisible" Value="True" />
<Setter Property="Data" Value="{StaticResource DataGridSortIconAscendingPath}" />
</Style>
<Style Selector="DataGridColumnHeader:sortdescending /template/ Path#SortIcon">
<Setter Property="IsVisible" Value="True" />
<Setter Property="Data" Value="{StaticResource DataGridSortIconDescendingPath}" />
</Style>
The key line relative to this question is:
<Setter Property="HorizontalContentAlignment" Value="Center" />
To only do one column, things would get a little more involved as above is a globally applied style through the Selector=Type (same as WPF {Type:xxx} style convention). So you could look at making that one column "targetable" somehow so a Selector= would only hit that column.
Off the top of my head, you'd have to turn off auto column generation on your DataGrid instance, manually generate the columns and give that one column a name, such as "immagonnabecentered", then selectors should just target this single column.
So create columns like:
<controls:DataGrid.Columns>
<DataGridTextColumn Header="File Name" Binding="{Binding FileName}" SortMemberPath="FileName"/>
<DataGridTextColumn x:Name="immagonnabecentered" Header="File Name" Binding="{Binding FileName}" SortMemberPath="FileName"/>
...
</controls:DataGrid.Columns>
Then update the style selector on the Style to hit this one column.
<Style Selector="#immagonnabecentered">
<Style Selector="DataGridColumnHeader#immagonnabecentered">
Im trying to style a RibbonMenuItem target type. the items inside are checkmark with border and contents. When IsMouseOver i want the border brush to be black.
The problem is there's not a borderbrush on the menuitem trigger property, and also im assuming the IsHighLighted is sort of like IsMouseOver property, so i make a seperate border style, and bind it to the style under trigger. i even tried to set the Opacity to a 1 value, but nothing seems to work
this is my code, as you can tell, im trying to override the ribbonmenuitem style
<Style x:Key="BorderThicknessStyle"
TargetType="{x:Type Border}">
<Setter Property="BorderThickness" Value="1"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderThickness" Value="2"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="{x:Type RibbonMenuItem}"
TargetType="{x:Type RibbonMenuItem}">
<Setter Property="HorizontalContentAlignment" Value="{Binding
Path=HorizontalContentAlignment,RelativeSource={RelativeSource AncestorType=
{x:Type ItemsControl}}}" />
<Setter Property="VerticalContentAlignment" Value="{Binding
Path=VerticalContentAlignment,RelativeSource={RelativeSource AncestorType=
{x:Type ItemsControl}}}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Padding" Value="3,2,3,2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RibbonMenuItem}">
<Grid x:Name="MainGrid" SnapsToDevicePixels="True">
<Border x:Name="Border"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding
BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="2">
<Grid>
<Grid.ColumnDefinitions>
<!--Icon or check mark column-->
<ColumnDefinition MinWidth="22"
Width="Auto"
SharedSizeGroup="MenuItemIconColumnGroup" />
<!--Header column-->
<ColumnDefinition Width="*"/>
<!--Submenu arrow column-->
<ColumnDefinition Width="14" />
</Grid.ColumnDefinitions>
<Border x:Name="PART_SideBarBorder"
BorderThickness="1"
Background="{DynamicResource
ThemeWindowBackgroundBrush}"
BorderBrush="{Binding RelativeSource=
{RelativeSource TemplatedParent},
Path=Ribbon.BorderBrush}"
MaxWidth="17"
MaxHeight="17">
<Grid x:Name="SideBarOverlay"
Background="{TemplateBinding
Background}">
<Image x:Name="Image"
Width="16"
Height="16"
Margin="4,3,6,1"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Source="{TemplateBinding
ImageSource}" />
<Border x:Name="CheckMarkBorder"
BorderBrush="{TemplateBinding
BorderBrush}"
ClipToBounds="True">
<Path x:Name="CheckMark"
Visibility="Hidden"
Data="M 0 5 L 3 8 M 3 8 L 8 0"
Stretch="Uniform"
Stroke="{TemplateBinding
Foreground}"
StrokeEndLineCap="Round"
StrokeStartLineCap="Round"
Margin="2"
StrokeThickness="2" />
</Border>
</Grid>
</Border>
<ContentPresenter Grid.Column="1"
ContentSource="Header"
VerticalAlignment="Center"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True" />
<Path x:Name="Arrow"
Visibility="Collapsed"
Grid.Column="2"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Fill="{TemplateBinding Foreground}" />
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ImageSource" Value="{x:Null}">
<Setter TargetName="Image" Property="Visibility"
Value="Collapsed" />
</Trigger>
<Trigger Property="IsCheckable" Value="True">
<Setter TargetName="Arrow" Property="Visibility"
Value="Hidden" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="CheckMark" Property="Visibility"
Value="Visible" />
<Setter TargetName="CheckMarkBorder"
Property="Visibility" Value="Visible" />
<Setter TargetName="Image" Property="Visibility"
Value="Hidden" />
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter TargetName="PART_SideBarBorder"
Property="Style" Value="
{StaticResource BorderThicknessStyle}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Image" Property="Opacity"
Value="0.5" />
<Setter TargetName="Arrow" Property="Opacity"
Value="0.5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This works for me. In the ControlTemplate.Triggers, you want to add the DataTrigger instead of Trigger.
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsHighlighted}"
Value="True">
<Setter TargetName="PART_SideBarBorder" Property="BorderBrush"
Value="Black"/>
</DataTrigger>
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.
so i am trying to design a little login page, based on this tutorial:
Xamarin Tutorial
My code differs a little, this is my LoginPage.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App.ViewModels.LoginPage"
BackgroundColor="{StaticResource BackgroundColor}">
<ScrollView>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="AUTO"/>
<RowDefinition Height="AUTO"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--header spacing-->
<BoxView BackgroundColor="Green" Grid.Row="0"/>
<Image Source="LoginBackground.png" Aspect="AspectFill" HeightRequest="150"/>
<Image Source="CurvedLimiter.png" VerticalOptions="End" HeightRequest="50" Aspect="Fill"/>
<!--header-->
<BoxView BackgroundColor="White" Grid.Row="1" HeightRequest="100"/>
<StackLayout Grid.Row="1">
<Entry Text="Email" x:Name="Email" Style="{StaticResource LoginEntry}"/>
<Entry IsPassword="True" Text="Password" x:Name="Password" Style="{StaticResource LoginEntry}"/>
<Button Text="Login" x:Name="btnLogin" Clicked="btnLogin_Clicked" Style="{StaticResource LoginButton}"/>
</StackLayout>
<!--login-->
<BoxView BackgroundColor="White" Grid.Row="2"/>
</Grid>
</ScrollView>
</ContentPage>
As you can see, I am using StaticRessources, which are described in my App.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App.App">
<Application.Resources>
<ResourceDictionary>
<!-- colors -->
<Color x:Key="HeaderTextColor">#585858</Color>
<Color x:Key="BodyTextColor">#C3C3C3</Color>
<Color x:Key="ButtonBackgroundColor">#5992FF</Color>
<Color x:Key="BackgroundColor">#5992FF</Color>
<!--Font families-->
<OnPlatform x:Key="RegularFontFamily" x:TypeArguments="x:String" iOS="HelveticaNeue" Android="sans-serif" />
<OnPlatform x:Key="LightFontFamily" x:TypeArguments="x:String" iOS="HelveticaNeue-Light" Android="sans-serif-light" />
<OnPlatform x:Key="MediumFontFamily" x:TypeArguments="x:String" iOS="HelveticaNeue-Medium" Android="sans-serif-medium" />
<!-- Font sizes -->
<Font x:Key="BodyFont" FontSize="18" FontFamily="{StaticResource RegularFontFamily}" />
<Font x:Key="TagTextFont" FontSize="18" FontFamily="{StaticResource RegularFontFamily}" />
<Font x:Key="StatsNumberFont" FontSize="20" FontFamily="{StaticResource LightFontFamily}" />
<Font x:Key="StatsCaptionFont" FontSize="16" FontFamily="{StaticResource LightFontFamily}" />
<Font x:Key="ButtonFont" FontSize="14" FontFamily="{StaticResource MediumFontFamily}" />
<!-- Styles -->
<Style x:Key="LoginEntry" TargetType="Entry">
<Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" />
<Setter Property="HorizontalTextAlignment" Value="Center"/>
</Style>
<Style x:Key="LoginButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="{StaticResource ButtonBackgroundColor}"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="HeightRequest" Value="40"/>
<Setter Property="BorderRadius" Value="15"/>
<Setter Property="Font" Value="{StaticResource ButtonFont}"/>
<Setter Property="WidthRequest" Value="200"/>
<Setter Property="HorizontalOptions" Value="Center"/>
</Style>
<Style x:Key="ProfileNameLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" />
<Setter Property="Font" Value="{StaticResource TitleFont}" />
</Style>
<Style x:Key="ProfileTagLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource BodyTextColor}" />
<Setter Property="Font" Value="{StaticResource TagTextFont}" />
</Style>
<Style x:Key="StatsNumberLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" />
<Setter Property="HorizontalTextAlignment" Value="Center"/>
<Setter Property="Font" Value="{StaticResource StatsNumberFont}" />
</Style>
<Style x:Key="StatsCaptionLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource BodyTextColor}" />
<Setter Property="Margin" Value="0,-5,0,0"/>
<Setter Property="HorizontalTextAlignment" Value="Center"/>
<Setter Property="Font" Value="{StaticResource StatsCaptionFont}" />
</Style>
<Style x:Key="MainBodyLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource BodyTextColor}" />
<Setter Property="Font" Value="{StaticResource BodyFont}" />
</Style>
<Style x:Key="FollowButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="{StaticResource ButtonBackgroundColor}"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="HeightRequest" Value="40"/>
<Setter Property="BorderRadius" Value="20"/>
<Setter Property="Font" Value="{StaticResource ButtonFont}"/>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
The thing is that this worked, at least in the XAML preview. However when I wanted to compile the code, I got the following error message, which refers to the first Font x:key=... Line:
Position 19:36. No property, bindable property, or event found for
'FontSize', or mismatching type between value and property.
Why is it? Now also the XAML previewer doesn't work anymore, because the project failed to compile...
Thanks very much in advance!
You are declaring your fonts wrong.
<Style x:Key="BodyFont" TargetType="Label">
<Setter Property="FontSize" Value="18"/>
<Setter Property="FontFamily" Value="{StaticResource RegularFontFamily}"/>
</Style>
And do the same for rest of the fonts.
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.