I have 2 styles in static resources. First ( with name LabelFont SetterProperty="FontSize")
<OnIdiom x:TypeArguments:"x:Double" Phone="15", Tablet "30"/>.
Second is for setting Margin with OnPlatform and is BasedOn="LabelFont" with name MarginLabel and SetterProperty="Margin":
<OnPlatform x:TypeArguments="x:Double">
<On Platform="Android" Value="20,0,0,0" />
</OnPlatform>
(Sorry I dont have whole code now, I can post later if its necessary...)
When I define a Label, where I use Style="{StaticResources MarginLabel}" the font is set, but not Margin. No error.
Can anybody help me where is the problem? Thank you.
Instead of creating two styles,you could combine them in oneļ¼
<Style x:Key="MarginLabel" TargetType="Label">
<Setter Property="FontSize">
<Setter.Value>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>15</OnIdiom.Phone>
<OnIdiom.Tablet>30</OnIdiom.Tablet>
</OnIdiom>
</Setter.Value>
</Setter>
<Setter Property="Margin">
<Setter.Value>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="Android" Value="20,0,0,0" />
</OnPlatform>
</Setter.Value>
</Setter>
</Style>
then use like:
<Label Text="Hello" Style="{StaticResource MarginLabel}"></Label>
Related
I'm setting up a style for a label and having some issue with the XAML formatting. I have the below code which works well.
<Style x:Key="LabelMargin" TargetType="Label">
<Setter Property="Margin">
<Setter.Value>
<OnIdiom x:TypeArguments="Thickness">
<OnIdiom.Phone>5,5,0,0</OnIdiom.Phone>
<OnIdiom.Tablet>10,20,0,0</OnIdiom.Tablet>
</OnIdiom>
</Setter.Value>
</Setter>
</Style>
However, I like to be able to drill now a little more to the OS level.
Instead of just phone, I like to target the OS.
I found some samples but none of them are for margins.
I have come up with the below XAML but its not working?
<Style x:Key="LabelMargin" TargetType="Label">
<Setter Property="Margin" x:TypeArguments="Thickness" Value = "{OnIdiom
Phone= {OnPlatform iOS =5,5,0,0 , Android=5,5,0,0},
Tablet= {OnPlatform iOS =5,5,0,0 , Android=5,5,0,0}}" >
</Setter>
</Style>
Any help would be appreciated.
Mike
After some trial and error I got it to work. If anyone stumbles on this question here is how I got to to work:
<Setter Property="Margin">
<Setter.Value>
<OnIdiom x:TypeArguments="Thickness">
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="Thickness" Android ="5,5,0,0" iOS ="5,5,0,0" />
</OnIdiom.Phone>
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="Thickness" Android ="20,20,20,20" iOS ="20,20,20,20" />
</OnIdiom.Tablet>
</OnIdiom>
</Setter.Value>
</Setter>
I used the same style for the Thumb of the slider, but the Thumb looks different in different context.
Expected Pressed Thumb:
Expected Pressed Thumb:
Real Normal Thumb:
Real Pressed Thumb
As you can see from the real ones, they are somewhat transparent in the middle. Why are they different from the expected ones? How can I make them behave like the expected ones? They share the same code.
These are the styles:
<Style x:Key="SliderThumbStyle" TargetType="Thumb">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse
x:Name="ellipse"
Fill="{StaticResource MediaSliderThumbFillBrush}"
Stroke="White"
StrokeThickness="3.2" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style
x:Key="SliderPressedThumbStyle"
BasedOn="{StaticResource SliderThumbStyle}"
TargetType="Thumb">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse
x:Name="ellipse"
Fill="White"
Stroke="White"
StrokeThickness="3.2" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style
x:Key="SliderPointerOverThumbStyle"
BasedOn="{StaticResource SliderThumbStyle}"
TargetType="Thumb">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse
x:Name="ellipse"
Fill="{StaticResource MediaSliderThumbFillBrush}"
Stroke="{StaticResource MedialSliderPointerOverThumbStrokeBrush}"
StrokeThickness="3.2" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
These are the brushes:
<media:BackdropBlurBrush x:Key="MediaSliderThumbFillBrush" Amount="50" />
<AcrylicBrush
x:Key="MediaSliderTrackRectBrush"
BackgroundSource="Backdrop"
FallbackColor="White"
TintColor="White"
TintOpacity="0.25" />
<AcrylicBrush
x:Key="MedialSliderPointerOverThumbStrokeBrush"
BackgroundSource="Backdrop"
FallbackColor="White"
TintColor="White"
TintOpacity="0.75" />
UWP Same Thumb Style but looks different
Please check MediaControl.xaml custom control. You set the Opacity as 0.75 for FullMediaControlGrid grid cause this issue, you could solve this by setting Opacity as 1.0.
<Grid
x:Name="FullMediaControlGrid"
Background="{x:Bind Background}"
Opacity="1"
RequestedTheme="Dark"
Visibility="Visible">
I'm trying to style my UWP application with some specific styles, while on other platforms it should remain default.
This is my project layout:
I tried the following things:
In Clients.Shared creating a style as following:
<Style x:Key="SomeStyle" TargetType="Button" />
And adding the same Style key in the Clients.Themes.UWP so it could hopefully override it, but no luck.
Then I tried Having a Dummy Style and using the onPlatform but that didn't work either, but I still think this is the way to go. I had the following code:
<Style x:Key="DummyStyle" TargetType="Button">
<Setter Property="Style">
<Setter.Value>
<OnPlatform x:Key="ButtonStyle" x:TypeArguments="Style">
<On Platform="UWP" Value="{StaticResource SomeStyle}"></On>
</OnPlatform>
</Setter.Value>
</Setter>
</Style>
I tried messing around with merged ResourceDictionary.MergedDictionaries but there I couldn't include the xaml
Anybody have any clue?
Try this:
<OnPlatform x:TypeArguments="Color" Android="Green" iOS="White" WinPhone="White"
x:Key="PrimaryColor" />
<Style x:Key="ButtonColor" TargetType="Button">
<Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" />
</Style>
<Button Text="Hello" HorizontalOptions="StartAndExpand"
Grid.Row="2" Grid.ColumnSpan="2" Style="{StaticResource ButtonColor}" />
In this example, I am defining a style for a Button called ButtonColor. This Button will use a BackgroundColor of white for all platforms except Android where it will be Green.
I find this is the most common use for this tag with regard to styling; if you are working with fonts, be sure to run on simulator and actual devices to get the font that you want.
This syntax works for me:
<Style x:Key="zoneLabelStyle" TargetType="Label">
<Setter Property="HeightRequest" Value="18" />
<Setter Property="Margin">
<OnPlatform x:TypeArguments="Thickness">
<On Platform="Android" Value="0, -3, 0, 0" />
</OnPlatform>
</Setter>
</Style>
Why do not use
<Button.Style>
<OnPlatform x:TypeArguments="x:Style">
<OnPlatform.iOS>...</OnPlatform.iOS>
<OnPlatform.Android>...</OnPlatform.Android>
<OnPlatform.WinPhone>...</OnPlatform.WinPhone>
</OnPlatform>
</Button.Style>
Hope it will help.
Gang,
I'm referencing the 16299 version.
I'm trying to set a style for the ContentDialog, and a Style for the PrimaryButton. However, I cannot get both of them working together:
<ContentDialog x:Class="App1.ContentDialog1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
PrimaryButtonText="Button1"
SecondaryButtonText="Button2"
Style="{StaticResource ContentDialogStyle}"
PrimaryButtonStyle="{StaticResource ContentDialogPrimaryButtonStyle}">
<Grid />
</ContentDialog>
This will only apply the "Style" and not the "PrimaryButtonStyle". However, if I remove the "Style" attribute, I then get the PrimaryButtonStyle applied.
I have tried applying the PimaryButtonStyle inside the Style XAML, but that doesn't work either:
<Style TargetType="Button" x:Key="ContentDialogPrimaryButtonStyle">
<Setter Property="Template">
<Setter.Value>
...
</Setter.Value>
</Setter>
</Style>
<Style TargetType="ContentDialog" x:Key="ContentDialogStyle">
<Setter Property="PrimaryButtonStyle" Value="{StaticResource ContentDialogPrimaryButtonStyle}" />
<Setter Property="Template">
<Setter.Value>
...
</Setter.Value>
</Setter>
</Style>
Any ideas how I style the Primary/Secondary buttons inside a ContentDialog that itself has a Style?
Kind regards
Adam
It should be related with your Template in the ContentDialogStyle. We can change both ContentDialogStyle and PrimaryButtonStyle in the xaml, here is a simple example, you can see it. Then you should take a look at your Template in the ContentDialogStyle.
This is the code,
<Style TargetType="Button" x:Key="ContentDialogPrimaryButtonStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="Green" BorderThickness="5">
<ContentPresenter Background="Red" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="ContentDialog" x:Key="ContentDialogStyle">
<Setter Property="Background" Value="Yellow"/>
</Style>
This is the ContentDialog,
<ContentDialog
...
PrimaryButtonText="Button1"
SecondaryButtonText="Button2"
Style="{StaticResource ContentDialogStyle}"
PrimaryButtonStyle="{StaticResource ContentDialogPrimaryButtonStyle}">
<Grid/>
</ContentDialog>
I want to change Font Family, Font Size and Foreground color for HubSection Header.
Something like this:
<Style TargetType="HubSection" x:Key="HubSection">
<Setter Property="Header">
<Setter.Value>
<Setter Property="FontSize" Value="100"></Setter>
<Setter Property="Foreground" Value="Yellow"></Setter>
</Setter.Value>
</Setter>
</Style>
<HubSection Width="500" Header="Section Name" Style="{StaticResource HubSection}">
How can I do it?
The property you want to change isn't Header but HeaderTemplate. Here's my working example:
<Style TargetType="HubSection">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}"
FontSize="100"
Foreground="Yellow"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
If you want to apply this style to all Hub controls in your app, just remove the Key and place it in the App.xaml file in Resources.
If you don't want to override header template you can override default theme resources:
<FontWeight x:Key="HubSectionHeaderThemeFontWeight">SemiLight</FontWeight>
<x:Double x:Key="HubSectionHeaderThemeFontSize">26.667</x:Double>
Unfortunately there is no special resources for FontFamily and Foreground. Template is using defaults from Button. So you will influence whole application. But in many cases that's what you want, right?
<FontFamily x:Key="ContentControlThemeFontFamily">Segoe UI</FontFamily>
<SolidColorBrush x:Key="ButtonForegroundThemeBrush" Color="Red" />