I have here a set of inordinately complex scalable vector graphic icons which were created using Illustrator, and imported into my WPF app using the Expression Blend and Inkscape hack:
Convert SVG to XAML
I tried various method of importing the original icons, this is above approach is the only way they would import correctly in my app.
So now I need to make my app work on a new smaller resolution, and even when in a ViewBox these icons will not scale.
If I remove the width/height attributes it ruins the SVG and the icon essentially disappears.
<Style x:Key="BenefitsIconFlexBox" TargetType="{x:Type Viewbox}">
<Setter Property="MaxHeight" Value="240"/>
<Setter Property="Height" Value="201"/>
<Setter Property="Margin" Value="10,0,0,10"/>
</Style>
...
<Viewbox Style="{StaticResource BenefitsIconFlexBox}">
<Canvas Width="213.333" Height="213.333" Clip="F1 M 0,0L 213.333,0L 213.333,213.333L 0,213.333L 0,0" UseLayoutRounding="False">
<Path Canvas.Left="0" Canvas.Top="3.05176e-005" Stretch="Fill" Fill="#FFEDEDED" Data="F1 M 213.333,106.667C 213.333,165.579 165.579,213.333 106.667,213.333C 47.7547,213.333 0,165.579 0,106.667C 0,47.7547 47.7547,3.05176e-005 106.667,3.05176e-005C 165.579,3.05176e-005 213.333,47.7547 213.333,106.667 Z "/>
<Canvas Canvas.Left="60.588" Canvas.Top="46.828">
<Path Canvas.Left="17.276" Canvas.Top="0" Stretch="Fill" Fill="#FF424242" Data="F1 M 46.0787,0C 30.1827,0 17.276,13.0107 17.276,28.7973L 17.276,40.3173L 28.7973,40.3173L 28.7973,28.7973C 28.7973,19.308 36.584,11.5213 46.0787,11.5213C 55.5733,11.5213 63.36,19.308 63.36,28.7973L 63.36,40.3173L 74.8813,40.3173L 74.8813,28.7973C 74.8813,13.0107 61.9747,0 46.0787,0 Z "/>
</Canvas>
<Path Canvas.Left="60.588" Canvas.Top="87.1454" Stretch="Fill" Fill="#FFFB8C00" Data="F1 M 141.229,162.136L 72.104,162.136C 65.812,162.136 60.588,156.907 60.588,150.615L 60.588,98.6667C 60.588,92.3747 65.812,87.1454 72.104,87.1454L 141.333,87.1454C 147.625,87.1454 152.855,92.3747 152.855,98.6667L 152.855,150.505C 152.745,156.907 147.625,162.136 141.229,162.136 Z "/>
<Path Canvas.Left="98.0267" Canvas.Top="116.052" Stretch="Fill" Fill="#FFC76E00" Data="F1 M 115.307,124.693C 115.307,129.495 111.469,133.333 106.667,133.333C 101.864,133.333 98.0267,129.495 98.0267,124.693C 98.0267,119.896 101.864,116.052 106.667,116.052C 111.469,116.052 115.307,119.896 115.307,124.693 Z "/>
</Canvas>
</Viewbox>
I am open to using transforms or some c# logic to do the resolution math and scaling, but would prefer to use scaling with the view box.
I am not sure why the SVG goes gonzo when the dimensional data is removed, but surely this is the problem. I feel like if I can get rid of the height and width attributes this would scale.
Any suggestions are welcomed! Thank you.
ViewBox has no concern of it's children's preset sizing attributes. Those are only used as the base but ViewBox is what does the scaling accordingly. So if I say remove the Height/MaxHeight setter's from your associated style template and do the following, notice each ViewBox has a different Height. You could also make a style of the whole thing and avoid the repetitive code but for the sake of a quickie dirty concept example;
<StackPanel>
<Viewbox Height="20" Margin="5">
<Canvas Width="213.333" Height="213.333" Clip="F1 M 0,0L 213.333,0L 213.333,213.333L 0,213.333L 0,0" UseLayoutRounding="False">
<Canvas Canvas.Left="0" Canvas.Top="0">
<Path Width="213.333" Height="213.333" Canvas.Left="0" Canvas.Top="3.05176e-005" Stretch="Fill" Fill="#FFEDEDED" Data="F1 M 213.333,106.667C 213.333,165.579 165.579,213.333 106.667,213.333C 47.7547,213.333 0,165.579 0,106.667C 0,47.7547 47.7547,3.05176e-005 106.667,3.05176e-005C 165.579,3.05176e-005 213.333,47.7547 213.333,106.667 Z "/>
<Canvas Width="92.2653" Height="115.307" Canvas.Left="60.588" Canvas.Top="46.828">
<Path Width="57.6053" Height="40.3173" Canvas.Left="17.276" Canvas.Top="0" Stretch="Fill" Fill="#FF424242" Data="F1 M 46.0787,0C 30.1827,0 17.276,13.0107 17.276,28.7973L 17.276,40.3173L 28.7973,40.3173L 28.7973,28.7973C 28.7973,19.308 36.584,11.5213 46.0787,11.5213C 55.5733,11.5213 63.36,19.308 63.36,28.7973L 63.36,40.3173L 74.8813,40.3173L 74.8813,28.7973C 74.8813,13.0107 61.9747,0 46.0787,0 Z "/>
</Canvas>
<Path Width="92.2667" Height="74.9907" Canvas.Left="60.588" Canvas.Top="87.1454" Stretch="Fill" Fill="#FFFB8C00" Data="F1 M 141.229,162.136L 72.104,162.136C 65.812,162.136 60.588,156.907 60.588,150.615L 60.588,98.6667C 60.588,92.3747 65.812,87.1454 72.104,87.1454L 141.333,87.1454C 147.625,87.1454 152.855,92.3747 152.855,98.6667L 152.855,150.505C 152.745,156.907 147.625,162.136 141.229,162.136 Z "/>
<Path Width="17.28" Height="17.2813" Canvas.Left="98.0267" Canvas.Top="116.052" Stretch="Fill" Fill="#FFC76E00" Data="F1 M 115.307,124.693C 115.307,129.495 111.469,133.333 106.667,133.333C 101.864,133.333 98.0267,129.495 98.0267,124.693C 98.0267,119.896 101.864,116.052 106.667,116.052C 111.469,116.052 115.307,119.896 115.307,124.693 Z "/>
</Canvas>
</Canvas>
</Viewbox>
<Viewbox Height="50" Margin="5">
<Canvas Width="213.333" Height="213.333" Clip="F1 M 0,0L 213.333,0L 213.333,213.333L 0,213.333L 0,0" UseLayoutRounding="False">
<Canvas Canvas.Left="0" Canvas.Top="0">
<Path Width="213.333" Height="213.333" Canvas.Left="0" Canvas.Top="3.05176e-005" Stretch="Fill" Fill="#FFEDEDED" Data="F1 M 213.333,106.667C 213.333,165.579 165.579,213.333 106.667,213.333C 47.7547,213.333 0,165.579 0,106.667C 0,47.7547 47.7547,3.05176e-005 106.667,3.05176e-005C 165.579,3.05176e-005 213.333,47.7547 213.333,106.667 Z "/>
<Canvas Width="92.2653" Height="115.307" Canvas.Left="60.588" Canvas.Top="46.828">
<Path Width="57.6053" Height="40.3173" Canvas.Left="17.276" Canvas.Top="0" Stretch="Fill" Fill="#FF424242" Data="F1 M 46.0787,0C 30.1827,0 17.276,13.0107 17.276,28.7973L 17.276,40.3173L 28.7973,40.3173L 28.7973,28.7973C 28.7973,19.308 36.584,11.5213 46.0787,11.5213C 55.5733,11.5213 63.36,19.308 63.36,28.7973L 63.36,40.3173L 74.8813,40.3173L 74.8813,28.7973C 74.8813,13.0107 61.9747,0 46.0787,0 Z "/>
</Canvas>
<Path Width="92.2667" Height="74.9907" Canvas.Left="60.588" Canvas.Top="87.1454" Stretch="Fill" Fill="#FFFB8C00" Data="F1 M 141.229,162.136L 72.104,162.136C 65.812,162.136 60.588,156.907 60.588,150.615L 60.588,98.6667C 60.588,92.3747 65.812,87.1454 72.104,87.1454L 141.333,87.1454C 147.625,87.1454 152.855,92.3747 152.855,98.6667L 152.855,150.505C 152.745,156.907 147.625,162.136 141.229,162.136 Z "/>
<Path Width="17.28" Height="17.2813" Canvas.Left="98.0267" Canvas.Top="116.052" Stretch="Fill" Fill="#FFC76E00" Data="F1 M 115.307,124.693C 115.307,129.495 111.469,133.333 106.667,133.333C 101.864,133.333 98.0267,129.495 98.0267,124.693C 98.0267,119.896 101.864,116.052 106.667,116.052C 111.469,116.052 115.307,119.896 115.307,124.693 Z "/>
</Canvas>
</Canvas>
</Viewbox>
<Viewbox Height="100" Margin="5">
<Canvas Width="213.333" Height="213.333" Clip="F1 M 0,0L 213.333,0L 213.333,213.333L 0,213.333L 0,0" UseLayoutRounding="False">
<Canvas Canvas.Left="0" Canvas.Top="0">
<Path Width="213.333" Height="213.333" Canvas.Left="0" Canvas.Top="3.05176e-005" Stretch="Fill" Fill="#FFEDEDED" Data="F1 M 213.333,106.667C 213.333,165.579 165.579,213.333 106.667,213.333C 47.7547,213.333 0,165.579 0,106.667C 0,47.7547 47.7547,3.05176e-005 106.667,3.05176e-005C 165.579,3.05176e-005 213.333,47.7547 213.333,106.667 Z "/>
<Canvas Width="92.2653" Height="115.307" Canvas.Left="60.588" Canvas.Top="46.828">
<Path Width="57.6053" Height="40.3173" Canvas.Left="17.276" Canvas.Top="0" Stretch="Fill" Fill="#FF424242" Data="F1 M 46.0787,0C 30.1827,0 17.276,13.0107 17.276,28.7973L 17.276,40.3173L 28.7973,40.3173L 28.7973,28.7973C 28.7973,19.308 36.584,11.5213 46.0787,11.5213C 55.5733,11.5213 63.36,19.308 63.36,28.7973L 63.36,40.3173L 74.8813,40.3173L 74.8813,28.7973C 74.8813,13.0107 61.9747,0 46.0787,0 Z "/>
</Canvas>
<Path Width="92.2667" Height="74.9907" Canvas.Left="60.588" Canvas.Top="87.1454" Stretch="Fill" Fill="#FFFB8C00" Data="F1 M 141.229,162.136L 72.104,162.136C 65.812,162.136 60.588,156.907 60.588,150.615L 60.588,98.6667C 60.588,92.3747 65.812,87.1454 72.104,87.1454L 141.333,87.1454C 147.625,87.1454 152.855,92.3747 152.855,98.6667L 152.855,150.505C 152.745,156.907 147.625,162.136 141.229,162.136 Z "/>
<Path Width="17.28" Height="17.2813" Canvas.Left="98.0267" Canvas.Top="116.052" Stretch="Fill" Fill="#FFC76E00" Data="F1 M 115.307,124.693C 115.307,129.495 111.469,133.333 106.667,133.333C 101.864,133.333 98.0267,129.495 98.0267,124.693C 98.0267,119.896 101.864,116.052 106.667,116.052C 111.469,116.052 115.307,119.896 115.307,124.693 Z "/>
</Canvas>
</Canvas>
</Viewbox>
</StackPanel>
Now say you have that ViewBox placed in say a Grid cell with * sizing on the column/row and you DON'T set a Height/Width value on the ViewBox. Then it will fill whatever space is allowed to it. As the viewing medium (large screen, medium screen, little screen, doesn't matter) changes, it will size itself accordingly using the measurements of it's parent as it's boundary.
I want to create a custom usercontrol to represent a player in a 2D map.
I had an ellipse to represent the player but I want to have on the border of the ellipse an arrow to indicate where the player is looking.
This is what I tried :
<Ellipse Width="17" Height="17" Stroke="Black" Fill="White" HorizontalAlignment="Center" />
<Path Data="M5,0 0,5 5,10" Fill="White" Stroke="Black" VerticalAlignment="Center" >
<Path.LayoutTransform>
<RotateTransform Angle="10"/>
</Path.LayoutTransform>
</Path>
the result :
That looks like what I want (it's not properly aligned but that's not the point here).
The problems are :
I know the position of the ellipse's center without the arrow
When the arrow will be on the right the relative position of the ellipse's center will be different --> I could solve this problem using a square control
My Circle has a textblock on top (Horitonzal + vertical center) to
display its id
How to move the arrow depending on the position looked ? I thought the easier might be to calculate an angle and rotate the whole control.
My first idea was to draw using any vector drawing software (illustrator for instance) the path, and get the coordinates of the path, and paste them in WPF.
then just rotate the usercontrol.
But doing this will also rotate the text and I don't want the text to rotate.
I'm stuck on this one, I hope my problem is enough described to be understood.
EDIT My first try :
<ControlTemplate TargetType="ContentControl">
<Grid Width="34" Height="34">
<Path x:Name="contour_forme"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="1"
Stretch="Uniform"
Width="28"
Height="22"
HorizontalAlignment="Left"
Fill="{TemplateBinding Background}"
Data="M28.857,53.500 C24.537,53.487 20.477,52.380 16.938,50.443 C16.938,50.443 16.938,50.500 16.938,50.500 C16.938,50.500 16.785,50.350 16.785,50.350 C12.845,48.157 9.579,44.924 7.317,41.032 C7.317,41.032 -6.176,27.755 -6.176,27.755 C-6.176,27.755 8.206,14.530 8.206,14.530 C10.380,11.316 13.289,8.649 16.681,6.736 C16.681,6.736 16.938,6.500 16.938,6.500 C16.938,6.500 16.938,6.581 16.938,6.581 C20.525,4.615 24.641,3.496 29.021,3.509 C42.835,3.551 53.996,14.775 53.951,28.580 C53.906,42.385 42.670,53.542 28.857,53.500 ZM29.004,8.507 C17.953,8.474 8.965,17.400 8.929,28.443 C8.893,39.487 17.822,48.467 28.873,48.500 C39.924,48.533 48.912,39.608 48.948,28.564 C48.985,17.520 40.056,8.540 29.004,8.507 Z"
>
<Path.LayoutTransform>
<RotateTransform Angle="0" />
</Path.LayoutTransform>
</Path>
<TextBlock Style="{DynamicResource StyleTextes}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"
Text="5"
/>
</Grid>
</ControlTemplate>
With the result :
As you can see I didn't manage to center the text inside my 22px circle.
My arrow is about 6 px height so I've created a control of 22 (circle's size expected) + 2 * 6px depending on the arrow position.
But when I try to rotate my path doing :
<Path.LayoutTransform> <RotateTransform Angle="90" />
</Path.LayoutTransform>
I have the following result :
I'm not sure on how I can keep the circle of my path in the center of the control when I rotate the path.
Just apply the RotateTransform to the "image" but not to the text.
Also I would use a render transform instead of a layout transform.
<Canvas Canvas.Left="206.333" Canvas.Top="119" Height="80" Width="80">
<Path Data="M244,99.333333 L210.16667,109.50034 244.83334,125.50034" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black" RenderTransformOrigin="0.5,0.5" Height="60" Canvas.Left="3" Canvas.Top="5" Width="60">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="70"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<TextBlock TextWrapping="Wrap" Text="TextBlock" Height="20" Width="80" Canvas.Top="30" TextAlignment="Center"/>
</Canvas>
I am in the process of moving all images from our project into a ResourceDictionary to be used across all projects. When using Syncfusion Metro Studio I am able to get the XAML source of the images.
<Viewbox x:Shared="false" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Grid>
<Grid Name="backgroundGrid" Width="48" Height="48" Visibility="Collapsed" />
<Path Data="M0,4.1309996L20.362437,4.1309996C20.038338,4.8125897,19.782439,5.5301299,19.594339,6.2769008L2.1451931,6.2769008 2.1451931,23.445208 30.042807,23.445208 30.042807,20.78887C30.342306,20.81167 30.642406,20.834471 30.949104,20.834471 31.367603,20.834471 31.781102,20.81027 32.188001,20.76737L32.188001,25.590239 20.922435,25.590239 20.922435,27.736771 23.605427,27.736771 23.605427,29.882 8.5839529,29.882 8.5839529,27.736771 11.265565,27.736771 11.265565,25.590239 0,25.590239z M29.967411,3.9921243L29.967411,8.1359167 25.823251,8.1359167 25.823251,10.100034 29.967411,10.100034 29.967411,14.243865 31.931586,14.243865 31.931586,10.100034 36.075645,10.100034 36.075645,8.1359167 31.931586,8.1359167 31.931586,3.9921243z M30.948448,0C35.985142,1.0841802E-08 40.067997,4.0825729 40.067997,9.1171007 40.067997,14.153367 35.985142,18.236 30.948448,18.236 25.912456,18.236 21.830998,14.153367 21.830998,9.1171007 21.830998,4.0825729 25.912456,1.0841802E-08 30.948448,0z" Stretch="Uniform" Fill="#FF666666" Width="26" Height="26" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Viewbox>
The issue here is that I am creating buttons with the image next to my text as follows:
<corecontrols:IdyllicButton Name="btnClose" Height="30">
<StackPanel Orientation="Horizontal">
<Image Source="/MHA.Modules.PolicyAdmin;component/Images/Cancel.png"/>
<TextBlock VerticalAlignment="Center" Margin="5,0" Text="Close"/>
</StackPanel>
</corecontrols:IdyllicButton>
But I cannot set my Image.ImageSource to my StaticResource that I have created in a ResourceDictionary as I get the following error:
An object of the type "System.Windows.Controls.Viewbox" cannot be
applied to a property that expects the type
"System.Windows.Media.ImageSource".
I have also tried using a canvas.
Any ideas how to do this?
Hoping this helps someone:
I found the solution, instead of using a Image, use the Rectangle control in its place and set the OpacityMask to the Viewbox resource.
<Rectangle Width="15" VerticalAlignment="Center"
Height="15"
Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Uniform" Visual="{StaticResource Close}"/>
</Rectangle.OpacityMask>
</Rectangle>
I found this scrolling MahApps.Metro source code for the WindowCommand Buttons.
I want to set the icon color in a MahApp application, but the brush is not working. In this example the icoun should be white, but still it is black.
<Rectangle Width="20" Height="20">
<Rectangle.Resources>
<SolidColorBrush x:Key="BlackBrush" Color="White" />
</Rectangle.Resources>
<Rectangle.Fill>
<VisualBrush Stretch="Fill" Visual="{StaticResource appbar_cupcake}" />
</Rectangle.Fill>
</Rectangle>
This is the resource icons.xml file in my app.
<Canvas Width="48" Height="48" Clip="F1 M 0,0L 48,0L 48,48L 0,48L 0,0" x:Key="appbar_cupcake">
<Path Width="24" Height="25" Canvas.Left="13" Canvas.Top="11" Stretch="Fill" Fill="{DynamicResource BlackBrush}" Data="F1 M 32,14C 33.1046,14 34,14.8954 34,16C 34,16.3643 33.9026,16.7058 33.7324,17L 34,17C 35.1046,17 36,17.8954 36,19C 36,20.1046 35.1046,21 34,21L 35,21C 36.1046,21 37,21.8954 37,23C 37,24.1046 36.1046,25 35,25L 15,25C 13.8954,25 13,24.1046 13,23C 13,21.8954 13.8954,21 15,21L 16,21C 14.8954,21 14,20.1046 14,19C 14,17.8954 14.8954,17 16,17L 16.2676,17C 16.0974,16.7058 16,16.3643 16,16C 16,14.8954 16.8954,14 18,14C 19,14 21,12 25,11C 29,14 31,14 32,14 Z M 15,26L 35,26L 32,36L 18,36L 15,26 Z " />
</Canvas>
What I'm doing wrong?
If you want to dynamically set the Fill color, you can do that by setting the Fill property. As you can see, you are already using the Fill property for the VisualBrush. Fortunately you can use the VisualBrush also in the OpacityMask property.
<Rectangle Fill="Black">
<Rectangle.OpacityMask>
<VisualBrush Visual="{StaticResource appbar_cupcake}" Stretch="Fill" />
</Rectangle.OpacityMask>
</Rectangle>
Hope that helps.
I've deconstructed a standard WPF button using Blend and have managed to create a nicely styled button, but I cannot figure out how to make the path fill the interior of the button space (the button width and height). I am also not sure if I need to specify ContentPresenter or even if it is correct. I am after the text in the middle of the button (as normal) but with my graphic path behind it.
Can anyone give me feedback on how to accomplish this? The style is defined as;
<ControlTemplate x:Key="CurvedButton" TargetType="{x:Type Button}">
<Grid>
<Path Fill="#ff951c1f" Data="F1 M 64,16 C 64,24 56,31 48,31 L 15,31 C 7,31 0,24 0,16 C 0,7 7,0 15,0 L 48,0 C 56,0 64,7 64,16 Z" />
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" />
</Grid>
</ControlTemplate>
The usage of this button is;
<StackPanel>
<Button Template="{StaticResource CurvedButton}" FontFamily="MS Trebuchet" FontSize="40" Width="200" Height="120" Foreground="Black">XXXXXXXXXXX</Button>
</StackPanel>
When all is done, it should just look like a curvy red button.
Thanks in advance
Ryan
There are a couple things you can do to get the results you're looking for.
Place the path in a viewbox and have it stretch to fill:
<ControlTemplate x:Key="CurvedButton" TargetType="{x:Type Button}">
<Grid>
<Viewbox Stretch="Fill">
<Path Fill="#ff951c1f" Data="F1 M 64,16 C 64,24 56,31 48,31 L 15,31 C 7,31 0,24 0,16 C 0,7 7,0 15,0 L 48,0 C 56,0 64,7 64,16 Z" />
</Viewbox>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" />
</Grid>
</ControlTemplate>
Use a border instead of a path:
<ControlTemplate x:Key="CurvedButton" TargetType="{x:Type Button}">
<Grid>
<Border CornerRadius="40" Background="#ff951c1f">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" />
</Border>
</Grid>
</ControlTemplate>