I have a UWP application, where I want a path to be the content of a button. So far, this is what I have:
<Style TargetType="Button" x:Key="arrow">
<Setter Property="Content">
<Setter.Value>
<Path Height="10" Width="10" Stretch="Uniform" Fill="Black" Data="F1 M 92.362,56.1133C 93.8282,57.8717 92.9765,60.7721 90.4336,60.7721L 80.461,60.7721L 80.461,103.953C 80.461,105.441 79.22,106.682 77.7318,106.682L 55.6016,106.682C 54.1133,106.682 52.8718,105.441 52.8718,103.953L 52.8718,60.7721L 42.8997,60.7721C 40.3575,60.7721 39.5052,57.8717 40.972,56.1133L 64.7376,27.5612C 65.3184,26.8627 66.0052,26.6081 66.6667,26.6536C 67.3282,26.6081 68.0131,26.8627 68.5964,27.5612L 92.362,56.1133 Z M 66.6667,0C 103.484,0 133.333,29.8476 133.333,66.6667C 133.333,103.486 103.484,133.333 66.6667,133.333C 29.8483,133.333 0,103.486 0,66.6667C 0,29.8476 29.8483,0 66.6667,0 Z M 66.6667,122.667C 97.5938,122.667 122.667,97.5938 122.667,66.6667C 122.667,35.739 97.5938,10.6667 66.6667,10.6667C 35.7389,10.6667 10.6667,35.739 10.6667,66.6667C 10.6667,97.5938 35.7389,122.667 66.6667,122.667 Z "/>
</Setter.Value>
</Setter>
</Style>
And the button:
<Button Height="13" Width="13" Style="{StaticResource arrow}">
However, the path doesn't show. Further investigating reveals that the path gets cut off at smaller sizes and works as content on the larger sizes. I suspect it might have to do with some kind of content padding. How do I make the path fill up the button instead of getting cut off?
You have solved it yourself - it's a padding problem (Button has a default one - just change it to 0). I've tried like this and it should work:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<Style TargetType="Button" x:Key="arrow">
<Setter Property="Padding" Value="0"/>
<Setter Property="Content">
<Setter.Value>
<Path Height="10" Width="10" Stretch="Uniform" Fill="Black" Data="F1 M 92.362,56.1133C 93.8282,57.8717 92.9765,60.7721 90.4336,60.7721L 80.461,60.7721L 80.461,103.953C 80.461,105.441 79.22,106.682 77.7318,106.682L 55.6016,106.682C 54.1133,106.682 52.8718,105.441 52.8718,103.953L 52.8718,60.7721L 42.8997,60.7721C 40.3575,60.7721 39.5052,57.8717 40.972,56.1133L 64.7376,27.5612C 65.3184,26.8627 66.0052,26.6081 66.6667,26.6536C 67.3282,26.6081 68.0131,26.8627 68.5964,27.5612L 92.362,56.1133 Z M 66.6667,0C 103.484,0 133.333,29.8476 133.333,66.6667C 133.333,103.486 103.484,133.333 66.6667,133.333C 29.8483,133.333 0,103.486 0,66.6667C 0,29.8476 29.8483,0 66.6667,0 Z M 66.6667,122.667C 97.5938,122.667 122.667,97.5938 122.667,66.6667C 122.667,35.739 97.5938,10.6667 66.6667,10.6667C 35.7389,10.6667 10.6667,35.739 10.6667,66.6667C 10.6667,97.5938 35.7389,122.667 66.6667,122.667 Z "/>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Button HorizontalAlignment="Center" Height="14" Width="14" Style="{StaticResource arrow}"/>
</Grid>
Related
I have the following XAML path which I want to convert to SVG. Is there a way to do it?
<Path Stroke="{DynamicResource ForegroundColorBrush}" Canvas.Right="0" Width="186" Height="216" Stretch="Fill" StrokeThickness="3" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 184.69,166.333L 173.338,166.333L 173.338,80.8143L 153.122,15.4178L 153.122,5.35669C 152.785,4.01523 152.448,2.67374 140.823,2.00302C 129.199,1.33228 106.287,1.33228 94.6631,2.00302C 83.0388,2.67374 82.7018,4.01523 82.3649,5.35669L 82.3649,15.4178L 62.1486,80.8143L 62.1486,166.333L 1.49997,166.333L 1.49997,206.577L 62.1486,206.577L 62.1486,211.607C 65.1811,212.613 68.2135,213.62 85.2288,214.123C 102.244,214.626 133.242,214.626 150.258,214.123C 167.273,213.62 170.305,212.613 173.338,211.607L 173.338,206.577L 184.7,206.5" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<ScaleTransform ScaleY="1" ScaleX="-1"/>
</Path.RenderTransform>
</Path>
I have a UWP app to control a kiln.I represent the temperature of the kiln over time in a Linegraph from the WinRT XAML Toolkit. To display I use this XAML:
<Charting:Chart x:Name="MyLineSeriesChart" Grid.ColumnSpan="4" VerticalAlignment="Center" FontSize="10" HorizontalContentAlignment="Left" RenderTransformOrigin="-0.082,0.454" Width="480" Height="250" HorizontalAlignment="Left">
<Charting:Chart.Axes >
<Charting:DateTimeAxis AxisLabelStyle="{StaticResource HorizontalLabelStyle}" Orientation="X"/>
</Charting:Chart.Axes>
<Charting:LineSeries Name="LineChart" Title="Temp" ItemsSource="{Binding}" DependentValueBinding="{Binding Path=Value}" IndependentValueBinding="{Binding Path=Key}" Margin="0,-38,-75,0" HorizontalAlignment="Stretch" Width="Auto">
<!-- <Charting:LineSeries.DependentRangeAxis>
<Charting:LinearAxis Orientation="Y" ShowGridLines="True" Title="Temp"/>
</Charting:LineSeries.DependentRangeAxis>-->
<Charting:LineSeries.DataPointStyle>
<Style TargetType="Charting:LineDataPoint">
<Setter Property="Visibility" Value="Collapsed"/>
<Setter Property="Width" Value="0"/>
<Setter Property="Background" Value="Red"/>
</Style>
</Charting:LineSeries.DataPointStyle>
</Charting:LineSeries>
</Charting:Chart>
You see a commented out part. I used that before. It worked OK but I wanted a different interval. In XAML you cannot set an interval because of the not nullable problem.
So I set the interval in VB code:
DirectCast(MyLineSeriesChart.Series(0), LineSeries).DependentRangeAxis = New LinearAxis() With {
.Title = "Temp",
.Orientation = AxisOrientation.Y,
.Minimum = 0,
.Maximum = 1000,
.Interval = 100,
.ShowGridLines = True
}
But the result is worse:
The temperature starts at 15 C up to about 1.000 C. But as you can see the graph shows very different figures. The actual temps in the graph's time were 15 to 200 C.
I pull my hair out as to why?
I just test your XAML code snippet, my graph was also not placed properly. So, I just removed following from the code and its just perfect
<Setter Property="Visibility" Value="Collapsed"/>
<Setter Property="Width" Value="0"/>
Hope it will help you.
Thanks
Somewhat of an old post, I realize, but wanted to briefly provide some information in case someone runs into this too and is having the same issues.
I had the same problem as described above (values were not were they were 'meant' to be on the Y-axis) but upon stepping through the code, I found that the margin property (set in the above code to Margin="0,-38,-75,0") was causing the shift.
Setting it to Margin="0,0,-75,0" resolved the issue for me...
the -75 value is somewhat arbitrary based on what data is being shown.
This is trivial thing but yet it does not work.
I have something like this (it is in its own folder)
<ResourceDictionary>
<Path x:Key="Test"
Stroke="Black"
Fill="Gray"
Data="M 10,100 C 10,300 300,-200 300,100" />
</ResourceDictionary>
Now I want to use it
<Page>
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergeDictionaries>
<ResourceDictionary Source="MyFolder/MyResourceDictionary.xaml/>
</ResourceDictionary.MergeDictionaries>
</ResourceDictionary>
</Page.Resources>
<ContentPresenter Content="{StaticResource Test}"/>
<Page/>
This will throw an exception, but I don't understand why. Exactly the same scenario in wpf works fine.
What about this solution?
Declare your GeometryData
<x:String x:Key="TestPathGeomerty">M 10,100 C 10,300 300,-200 300,100</x:String>
And use Path, instead ContentPresenter
<Path Data="{StaticResource TestPathGeomerty}"
Fill="Red"/>
The Path.Data property is of type Geometry so define it as a Geometry instead of a string
<Geometry x:Key="TestPathGeomerty">M 10,100 C 10,300 300,-200 300,100</Geometry>
<Path Data="{StaticResource TestPathGeomerty}"
Fill="Red"/>
In WPF, you can share the same instance within multiple controls. Unfortunately this is not possible in UWP.
The only solution that is guaranteed to work in UWP, is to define a DataTemplate in your resource containing the icon.
It is also better to use PathIcon instead of Path. PathIcon makes use of the Foreground property that will be inherited from your parent controls.
Here's an example on how to share Data paths for icons that will automatically scale (by using a Viewbox).
<Page.Resources>
<DataTemplate x:Key="MagnifyingGlassPathIconCT">
<Viewbox Stretch="Uniform">
<PathIcon Data="M44,12 C32,12 22,22 22,34 22,46 32,56 44,56 56,56 66,46 66,34 66,22 56,12 44,12z M44,0 C63,0 78,15 78,34 78,53 63,68 44,68 40,68 36.5,67.5 33,66 L32.5,66 14,90 0,79.5 18,55.5 17,55 C13,49 10,42 10,34 10,15 25,0 44,0z" />
</Viewbox>
</DataTemplate>
</Page.Resources>
<StackPanel Padding="40" HorizontalAlignment="Left">
<!-- Plain icon -->
<ContentPresenter
Width="40"
Height="40"
ContentTemplate="{StaticResource MagnifyingGlassPathIconCT}"
Foreground="Purple" />
<!-- Icon with a border -->
<Border
Width="40" Padding="7"
Height="40"
BorderBrush="Black"
BorderThickness="2">
<ContentPresenter ContentTemplate="{StaticResource MagnifyingGlassPathIconCT}" Foreground="Red" />
</Border>
<!-- Icon in a normal Button -->
<Button
Width="40"
Height="40"
ContentTemplate="{StaticResource MagnifyingGlassPathIconCT}"
Foreground="RoyalBlue" />
<!-- Icon in an AppBarButton -->
<AppBarButton
Width="40"
ContentTemplate="{StaticResource MagnifyingGlassPathIconCT}"
Foreground="Black"
Label="Search" />
</StackPanel>
For a solution that lets you define it in a Style, try writting an attached property like this:
public static string GetPathData(DependencyObject obj)
{
return (string)obj.GetValue(PathDataProperty);
}
public static void SetPathData(DependencyObject obj, string value)
{
obj.SetValue(PathDataProperty, value);
}
public static readonly DependencyProperty PathDataProperty =
DependencyProperty.RegisterAttached("PathData", typeof(string), typeof(ElementExtensions), new PropertyMetadata(null, (d, e) =>
{
if (d is Path path)
{
Binding b = new Binding { Source = e.NewValue };
path.SetBinding(Path.DataProperty, b);
}
}));
And now you can define a style like so:
<Style x:Key="BasePathStyle" TargetType="Path">
<Setter Property="e:ElementExtensions.PathData" Value="M 10,100 C 10,300 300,-200 300,100" />
</Style>
And then use it like so:
<Path Style="{StaticResource BasePathStyle}" />
I have some vector icons I want to use throughout my windows universal application. I've added them to a resource dictionary, added the dictionary to a merged dictionary in app.xml, and tried using the resources in a page. The images actually show up in the editor preview window, but throw an error when I attempt to debug the application.
ManaSymbols.xaml
<?xml version="1.0" encoding="UTF-8"?>
<xaml:ResourceDictionary
xmlns:xaml="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewbox x:Key="BlueManaSymbol" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Width="100" Height="100">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas>
<Canvas>
<Ellipse Width="100" Height="100" Fill="#FFC1D7E9"/>
</Canvas>
<Path Fill="#FF0D0F0F">
<Path.Data>
M 68.91657 83.71021 C 58.968869 94.408441 39.101769 93.367284 30.985174 80.955583 23.700186 70.338629 25.060135 55.965661 30.782622 44.970201 37.43962 31.696018 47.119757 19.99635 58.53257 10.53421 c -1.779599 7.330526 -2.971221 15.369494 0.5678 22.406733 4.282692 9.098857 12.226705 16.065144 15.7407 25.557642 2.950311 8.612064 0.582748 18.823437 -5.9245 25.211625 z m -0.129 -27.362 c -0.82319 -2.47714 -5.460323 -8.506164 -4.125006 -2.813916 -0.362035 4.191263 -1.937779 8.124558 -3.178994 12.106916 -0.269255 7.254198 11.007675 4.685165 9.226 -1.795 -0.01849 -2.611632 -0.877381 -5.133602 -1.922 -7.498 z
</Path.Data>
</Path>
</Canvas>
</Canvas>
</Viewbox>
</xaml:ResourceDictionary>
App.xaml
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Assets/ManaSymbols.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Page.xaml
<ContentControl Content="{StaticResource BlueManaSymbol}" Grid.Row="0" Margin="70,0,0,0" Width="30" Height="30" />
Error throw when debugging:
A first chance exception of type 'Windows.UI.Xaml.Markup.XamlParseException' occurred in MagicStats.Windows.exe
WinRT information: Failed to assign to property 'Windows.UI.Xaml.Controls.ContentControl.Content'. [Line: 79 Position: 25]
The error message seems to indicate that the binding failed, but it actually works in the design window. Any thoughts are appreciated.
I want to have a logout icon in the appbar.
I was sure it should be in the common styles, but discovered that unfortunately it's not.
So, how can I do it?
I've found this site, where I found the icon I wanted to the logout button, and copied the xaml which gave me the path. Next I added this code to the common:
<Style x:Key="LogoutAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="AutomationProperties.AutomationId" Value="LogoutAppBarButton" />
<Setter Property="AutomationProperties.Name" Value="Logout" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Viewbox RenderTransformOrigin="0.47,0.47">
<Viewbox.RenderTransform>
<TransformGroup>
<CompositeTransform Rotation="0" ScaleX="0.551720260135184" ScaleY="0.551720260135184" />
</TransformGroup>
</Viewbox.RenderTransform>
<Path Stretch="Uniform"
Fill="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Data="F1 M 0,71.4297C -0.0207825,54.2669 7.09511,41.2825 13.974,33.0403C 20.8893,24.7292 27.6055,20.7252 28.2083,20.3522C 32.6992,17.6946 38.4714,19.2199 41.0976,23.7583C 43.7188,28.2812 42.2317,34.0878 37.7787,36.7583L 37.7604,36.7707L 37.7044,36.8053L 37.2148,37.1308L 35.1185,38.6797C 33.3203,40.1106 30.849,42.3333 28.414,45.2734C 23.5221,51.2292 18.8593,59.6705 18.8385,71.427C 18.8424,83.2799 23.5678,93.9374 31.2579,101.724C 38.9648,109.497 49.5065,114.279 61.2304,114.281C 72.9544,114.279 83.4961,109.497 91.2019,101.724C 98.8932,93.9374 103.619,83.2799 103.622,71.427C 103.602,60.0305 99.2304,51.7707 94.5065,45.8346C 90.0091,40.207 85.1979,37.0722 84.7188,36.7799L 84.7031,36.7721L 84.6888,36.7642L 84.6784,36.7597C 80.2304,34.0865 78.7435,28.2799 81.362,23.7571C 83.9909,19.2187 89.7618,17.6933 94.2514,20.3509C 94.8568,20.7226 101.573,24.7265 108.488,33.0384C 115.371,41.2825 122.483,54.2655 122.464,71.427C 122.457,105.611 95.0443,133.322 61.2317,133.333C 27.4205,133.322 0.00785828,105.611 0,71.4297 Z M 51.8125,66.668L 51.8125,38.0944L 51.8125,9.52411C 51.8125,4.26556 56.03,-3.05176e-005 61.233,-3.05176e-005C 66.4323,-3.05176e-005 70.6497,4.26556 70.6497,9.52411L 70.6497,38.0944L 70.6497,66.668L 70.6524,66.668C 70.6524,71.9218 66.4323,76.1901 61.233,76.1901C 56.03,76.1901 51.8125,71.9218 51.8125,66.668 Z " />
</Viewbox>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
It is important to pay attention to the Path's Fill property, it can't be white color, because when we press on it and hold it, the default appbar icons become white, so the color should be changed to black, and therefore, we use this code which get's the foreground color from the parent - AppBarButtonStyle, which already has this logic on appbar icon pressed. This is the code:
Fill="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}"
One more thing, I have used some renders because the image was a little bit crooked, so I have fixed it by rendering it, maybe not the best way, but now it works perfectly !
The last step was to add this to all the pages I wanted to use the login appbar icon:
<Button Style="{StaticResource LogoutAppBarButtonStyle}" Click="Logout_Click" />