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.
Related
I have in my code several times this code
<Image
Aspect="AspectFit"
HeightRequest="75"
WidthRequest="75">
<Image.Clip>
<EllipseGeometry
Center="37.5,37.5"
RadiusX="37.5"
RadiusY="37.5" />
</Image.Clip>
</Image>
And I want to extract it as a XAML Style to reuse and reduce the code
It would look something like this
<Style TargetType="Image" ApplyToDerivedTypes="True" x:Key="roundedImageStyle">
<Setter Property="HeightRequest" Value="75"/>
<Setter Property="WidthRequest" Value="75"/>
<Setter Property="Aspect" Value="AspectFit"/>
<Setter Property="Clip" Value="??????"/>
</Style>
How can I set the Clip inside the style?
#jfversluis told me that it can be achieved like this
<Setter Property="Clip">
<EllipseGeometry
Center="37.5,37.5"
RadiusX="37.5"
RadiusY="37.5" />
</Setter>
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 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>
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.
I am writing a Store app with XAML and C#. I want to use Border and ViewBox. I got border styled, so I do not have to set properties that many times. I set BorderThickness to 2, and color to White, but this causes problems in my Viewbox.
Here it is in XAML:
<Viewbox Grid.Row="1" Stretch="Uniform">
<Grid Width="600" Height="600">
<Grid.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="White" />
<Setter Property="BorderThickness" Value="2" />
</Style>
<Style TargetType="Grid">
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Width" Value="150" />
<Setter Property="Height" Value="150" />
</Style>
</Grid.Resources>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Grid>
<Border>
<Viewbox>
<TextBlock Text="T" />
</Viewbox>
</Border>
</Grid>
The result of this is:
The problem is the scaled border around the letter "T".
I do not want to remove above styling for Border in Grid.Resources. I found only one solution so far...
<Viewbox>
<Viewbox.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="White" />
<Setter Property="BorderThickness" Value="0" />
</Style>
</Viewbox.Resources>
<TextBlock Text="T" />
... what would give correct result:
, but I do not want to put these lines after each ViewBoxes, because there will be many.
I also tried to make a component, what has this default "resource" of zero thick border, but that had bad scaling.
So my question is how to to remove that border?
You're right to use the zero value for BorderThickness. There just might be another element in the visual tree hierarchy that also holds a default value that causes this.
I can't test this right now, but I can recommend this tool to you:
http://blois.us/Snoop/
You can inspect the visual tree with this by dragging the crosshair above your running debug application. Every time I stumbled upon a problem like this I found it highly useful to see which controls really appear at runtime, because with xaml it can be really tough to know it all. Hope you can find it!