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>
Related
I have a series of button styles (add, edit, delete, etc.) that make use of the MahApps Metro cirucular button style but apply specific images to the button style. When I use any of the styles only once in a UserControl they work just fine and I get the anticipated look from the styles. However, when I use the styles more than once in a single UserControl, only one of the style instances acts as behaved, the others drop the image I am expecting to see.
I have tried naming the specific control instances (in case it was some sort of lifetime management issue) that are using the styles to see if this would fix the issue but it did not. I also tried creating multiple buttons that use the same style properties but do not use the style and that DID work and the buttons showed correctly, but I don't want to go that route as that would defeat the purpose of the styles.
Below is my code for the resource dictionary where I define the button styles. Please note that I have only shown the style for the add button as the other ones are basically the exact same I just change the image type and tool tip. That's why there is the circular button base that I use to define the majority of the style properties.
<!--Reference Dictionaries-->
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" /> Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatButton.xaml" />
</ResourceDictionary.MergedDictionaries>
<!--Circular Control Button Base-->
<Style x:Key="CircularControlButtonBase" TargetType="Button" BasedOn="{StaticResource MahApps.Metro.Styles.MetroCircleButtonStyle}">
<Setter Property="Height" Value="30"/>
<Setter Property="Width" Value="30"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="{DynamicResource GrayBrush1}"/>
<Setter Property="Foreground" Value="Black"/>
<Style.Triggers>
<!--IsMouseOver Trigger-->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource AccentColorBrush4}"/>
<Setter Property="Foreground" Value="{DynamicResource AccentColorBrush}"/>
<Setter Property="BorderBrush" Value="{DynamicResource AccentColorBrush}"/>
<Setter Property="BorderThickness" Value="2"/>
</Trigger>
<!--IsEnabled Trigger-->
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource MahApps.Metro.Brushes.Badged.DisabledBackgroundBrush}"/>
</Trigger>
</Style.Triggers>
</Style>
<!--Add Button-->
<Style TargetType="Button" x:Key="AddButton" BasedOn="{StaticResource CircularControlButtonBase}">
<Setter Property="ToolTip" Value="Add"/>
<!--Icon Image-->
<Setter Property="Content">
<Setter.Value>
<Rectangle Width="20" Height="20" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill">
<VisualBrush.Visual>
<iconPacks:PackIconMaterial Kind="Plus"/>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
And I consume the styles like this.
<UserControl x:Class ="TestClass"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!--The image on this button won't come through.-->
<Button Style="{DynamicResource AddButton}"/>
<!--The image on this button will come through.-->
<Button Style="{DynamicResource AddButton}"/>
</UserControl>
I would expect that the the plus sign image would come through on both buttons, instead of just the last button in the xaml code. Any help would be appreciated.
The IconPacks control inside your style will be only created once. You can use the IconPacks control inside the ControlTemplate and bind to the content which is the enum value to avoid this issue:
<Style x:Key="AddButton"
BasedOn="{StaticResource CircularControlButtonBase}"
TargetType="Button">
<Setter Property="ToolTip" Value="Add"/>
<Setter Property="Content" Value="{x:Static iconPacks:PackIconMaterialKind.Plus}"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<iconPacks:PackIconMaterial Width="20" Height="20" Kind="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
<Button Style="{DynamicResource AddButton}"/>
<Button Style="{DynamicResource AddButton}"/>
<Button Style="{DynamicResource AddButton}"/>
</StackPanel>
Namespace are:
xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
With the following layout and styles, the BoxView isn't vertically centered such that it's aligned with the label. How do I achieve this?
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<BoxView Grid.Column="0" BackgroundColor="Red"></BoxView>
<Label Grid.Column="1" x:Name="lbl1"/>
</Grid>
<Style TargetType="BoxView">
<Setter Property="WidthRequest" Value="10" />
<Setter Property="HeightRequest" Value="10" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="HorizontalOptions" Value="Center" />
</Style>
<Style TargetType="Label">
<Setter Property="FontSize" Value="12" />
<Setter Property="YAlign" Value="Center" />
</Style>
Setting VerticalOptions to Start or End has the box flush against the top or bottom respectively. So, it doesn't seem to be doing central alignment correctly.
Use CenterAndExpand instead
<Style TargetType="BoxView">
<Setter Property="WidthRequest" Value="10" />
<Setter Property="HeightRequest" Value="10" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
<Setter Property="HorizontalOptions" Value="Center" />
</Style>
Update: Here's a very good explanation of the difference.
Hope this helps.-
1) Try to add an explicit RowDefinition and its height;
2) Try adjust the label's FontSize to the BoxView size;
Or a dirty hack: you can add a top margin to the BoxView.
You need to use this on the Label too:
<Setter Property="VerticalOptions" Value="Center" />
Your code is just aligning the text position inside the label, not the position of the label itself.
When fighting text not aligning vertically:
Try the following: set for label
VerticalOptions="Fill"
VerticalTextAlignment="Center"
Consider a case when your elements are vertically aligned but do not seem so because of font creator settings, font adding more space to bottom or top breaking alignment. This can be solved a custom renderers system or by a silly
TranslationY="1"
or "-0.5" whatever..
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.
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!