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>
Related
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>
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" />
ANSWER
Thanks Filip, finally I found way to set the color. I just need to add Background property in DataPointStyle. I am posting my answer here. Also found a way how to modify the default tooltip.
Showing lines with different colors on a Silverlight Toolkit’s LineChart?
Using a custom ToolTip in Silverlight charting
<charting:LineSeries.DataPointStyle>
<Style TargetType="charting:LineDataPoint">
<Setter Property="Width" Value="17" />
<Setter Property="Height" Value="17" />
<Setter Property="Background" Value="Lime"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="charting:LineDataPoint">
<Grid>
<ToolTipService.ToolTip>
<ContentControl Content="{Binding Value,Converter={StaticResource MyConv},ConverterParameter=TEST}"/>
</ToolTipService.ToolTip>
<Ellipse Fill="Lime" Stroke="Lime" StrokeThickness="3" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</charting:LineSeries.DataPointStyle>
Question 1
I am creating multiple line chart series in a chart. Now WinRT XAML Toolkit assigns color for each series in random manner. I am using custom style for data points, so when I use custom style that randomness of color goes off. So how can I set or get that random color of series ? If I can get the color then I can use that color in datapoint, and if I can set color then I will generate random color myself.
Question 2
Moreover while hovering over data points the tool tip shows the dependent value, but I want to show more details how can I achieve that ?
Here's my code with custom style.
<charting:Chart x:Name="LineChart" Title="Line Chart" Margin="70,0">
<charting:LineSeries
Title="Population 1"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Value}"
IsSelectionEnabled="True">
<charting:LineSeries.DataPointStyle>
<Style TargetType="charting:LineDataPoint">
<Setter Property="Width" Value="17" />
<Setter Property="Height" Value="17" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="charting:LineDataPoint">
<Ellipse Fill="Green" Stroke="Green" StrokeThickness="3" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</charting:LineSeries.DataPointStyle>
</charting:LineSeries>
<charting:LineSeries
Title="Population 2"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Value}"
IsSelectionEnabled="True" Foreground="Blue">
<charting:LineSeries.DataPointStyle>
<Style TargetType="charting:LineDataPoint">
<Setter Property="Width" Value="17" />
<Setter Property="Height" Value="17" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="charting:LineDataPoint">
<Ellipse Fill="Red" Stroke="Red" StrokeThickness="3" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</charting:LineSeries.DataPointStyle>
</charting:LineSeries>
</charting:Chart>
Chart with random color (NO CUSTOM DATAPOINT STYLE)
Chart with NO random color (WITH CUSTOM DATAPOINT STYLE) [You can see both line has yellow color]
Trying to Bing for silverlight toolkit chart custom line color yields some potentially useful pages, like this. It should work mostly the same with the WinRT XAML Toolkit, but where they customize the Silverlight-based templates - you would need to customize the WinRT XAML Toolkit-based ones that you can either try to extract with Blend/Visual Studio designer or get the original templates from the source that you can grab from CodePlex.