I'm trying to mask a rectangle with a ellipse. However i don't find any examples for windows universal 10 apps.
if possible i like it to be xaml only.
edit
Example:
the white cuts out out a portion of the rectangle.
Meaning any content in the white would by moving move behind the black rectangle.
thanks in advance.
i found the answer.
<Grid Name="current" HorizontalAlignment="Center" VerticalAlignment="Center">
<Path Stroke="Transparent" StrokeThickness="4" Fill="Gray">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,0">
<LineSegment Point="0,-200"/>
<LineSegment Point="200,-200"/>
<LineSegment Point="200,-150"/>
<ArcSegment Point="200,-50" Size="50,50"/>
<LineSegment Point="200,0"/>
<LineSegment Point="0,0"/>
</PathFigure>
<PathFigure StartPoint="200,-200">
<LineSegment Point="400,-200"/>
<LineSegment Point="400,0"/>
<LineSegment Point="200,0"/>
<LineSegment Point="200,-50"/>
<ArcSegment Point="200,-150" Size="50,50"/>
<LineSegment Point="200,-200"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
</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 the following code in wpf, which I want to use in Windows Universal,
<Border>
<Border.Background>
<DrawingBrush Stretch="None" TileMode="Tile" Viewport="0,0,10,10" ViewportUnits="Absolute">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Geometry="M0,0 L10,0 10,10, 0,10Z" Brush="White" />
<GeometryDrawing Geometry="M0,10 L20,10 20,20, 10,20 10,0 0,0Z" Brush="Gray" />
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Border.Background>
</Border>
But I get the following error:
DrawingBrush is not supported in a Windows Universal project.
What this does is the background for transparent color with gray and white squares. Any one knows a solution for how to redo it without using an image?
Thanks.
You can use Path in UWP like this
<Path Stroke="White"
StrokeThickness="1"
Data="M0,0 L10,0 10,10, 0,10Z" />
I am new to XAML and I am trying to figure out some of the ways you position things. I have a graphic that started off as an Adobe Illustrator image which I then converted to code that renders fine as XAML. However, I can't seem to get it to display centered within the display area. Using horizontalalignment, I can center other things without issue, but for some reason, I can't seem to get this graphic to be centered. I'm hoping that I just missed something.
<Window x:Class="play.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<StackPanel>
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Height="320">
<Canvas x:Name="Layer_1" Canvas.Left="0" Canvas.Top="0" Width="62" Height="22" HorizontalAlignment="Center" Background="#00AEEF">
<!--Unknown tag: metadata-->
<!--Unknown tag: sodipodi:namedview-->
<Canvas x:Name="g3" HorizontalAlignment="Center">
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="path5" Fill="White" Margin="0,0,0,0" HorizontalAlignment="Center">
<Path.Data>
<PathGeometry Figures="M16.733 8.245c-0.027-0.413-0.393-0.726-0.798-0.698c-0.413 0.027-0.726 0.385-0.698 0.798 c0.123 1.855-0.554 3.68-1.855 5.006c-1.199 1.225-2.783 1.899-4.46 1.899c0 0 0 0-0.001 0c-1.553 0-3.007-0.59-4.125-1.656 l1.177-1.177c0.28-0.279 0.081-0.758-0.314-0.758H2.38c-0.245 0-0.444 0.199-0.444 0.444v3.278c0 0.396 0.478 0.594 0.758 0.314 l1.041-1.041c1.401 1.35 3.231 2.096 5.185 2.096c0.001 0 0.001 0 0.002 0c2.082 0 4.047-0.835 5.53-2.349 C16.053 12.771 16.884 10.527 16.733 8.245z" FillRule="NonZero"/>
</Path.Data>
</Path>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="path7" Fill="White" Margin="0,0,0,0">
<Path.Data>
<PathGeometry Figures="M2.075 10.503c0.413-0.031 0.723-0.391 0.692-0.804c-0.14-1.868 0.535-3.709 1.85-5.051 C5.819 3.424 7.403 2.75 9.079 2.75c1.594 0 3.085 0.618 4.213 1.736l-1.152 1.152c-0.28 0.28-0.082 0.759 0.314 0.759h3.278 c0.245 0 0.444-0.199 0.444-0.444V2.674c0-0.396-0.479-0.594-0.758-0.314l-1.066 1.065C12.941 2.024 11.074 1.25 9.079 1.25 c-2.083 0-4.048 0.834-5.533 2.348C1.93 5.248 1.101 7.513 1.272 9.811c0.029 0.395 0.358 0.694 0.747 0.694 C2.037 10.505 2.057 10.504 2.075 10.503z" FillRule="NonZero"/>
</Path.Data>
</Path>
</Canvas>
</Canvas>
</Viewbox>
</StackPanel>
Canvas is only good for static placement of graphics.
You should start using grids and stackpanels.
I have modified your xaml:
<StackPanel>
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Height="320">
<Grid x:Name="Layer_1" Width="62" Height="22" HorizontalAlignment="Center" Background="#00AEEF">
<!--Unknown tag: metadata-->
<!--Unknown tag: sodipodi:namedview-->
<Grid x:Name="g3" HorizontalAlignment="Center" VerticalAlignment="Center">
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="path5" Fill="White" Margin="0,0,0,0" HorizontalAlignment="Center">
<Path.Data>
<PathGeometry Figures="M16.733 8.245c-0.027-0.413-0.393-0.726-0.798-0.698c-0.413 0.027-0.726 0.385-0.698 0.798 c0.123 1.855-0.554 3.68-1.855 5.006c-1.199 1.225-2.783 1.899-4.46 1.899c0 0 0 0-0.001 0c-1.553 0-3.007-0.59-4.125-1.656 l1.177-1.177c0.28-0.279 0.081-0.758-0.314-0.758H2.38c-0.245 0-0.444 0.199-0.444 0.444v3.278c0 0.396 0.478 0.594 0.758 0.314 l1.041-1.041c1.401 1.35 3.231 2.096 5.185 2.096c0.001 0 0.001 0 0.002 0c2.082 0 4.047-0.835 5.53-2.349 C16.053 12.771 16.884 10.527 16.733 8.245z" FillRule="NonZero"/>
</Path.Data>
</Path>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="path7" Fill="White" Margin="0,0,0,0">
<Path.Data>
<PathGeometry Figures="M2.075 10.503c0.413-0.031 0.723-0.391 0.692-0.804c-0.14-1.868 0.535-3.709 1.85-5.051 C5.819 3.424 7.403 2.75 9.079 2.75c1.594 0 3.085 0.618 4.213 1.736l-1.152 1.152c-0.28 0.28-0.082 0.759 0.314 0.759h3.278 c0.245 0 0.444-0.199 0.444-0.444V2.674c0-0.396-0.479-0.594-0.758-0.314l-1.066 1.065C12.941 2.024 11.074 1.25 9.079 1.25 c-2.083 0-4.048 0.834-5.533 2.348C1.93 5.248 1.101 7.513 1.272 9.811c0.029 0.395 0.358 0.694 0.747 0.694 C2.037 10.505 2.057 10.504 2.075 10.503z" FillRule="NonZero"/>
</Path.Data>
</Path>
</Grid>
</Grid>
</Viewbox>
</StackPanel>
maybe you should use a gird (Grid.RowDefinitions and Grid.ColumnDefinitions) to center your canvas instead of the HorizontalAlignment property
best of luck !
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" />
am trying to start an animation that i have in an elemnthost1 by a button that I placed in a Form1.vb
The Elementhost has already a working button included which is working but I need basically to click it by clicking a Form.vb button
Button in the Element host need too be clicked by clicking the button Start in the Form or which would be even better just start the animation by clicking Start Button in the Form.vb
I have been trying to figure this out but i am not able to do that
Thanks
Ste
here is my xaml:
<UserControl x:Class="UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Height="372" Width="640">
<UserControl.Resources>
<PathGeometry x:Key="Daytona">
<PathFigure IsClosed="True" StartPoint="290,320">
<ArcSegment Point="290,320" Size="10,10" SweepDirection="Counterclockwise"></ArcSegment>
<ArcSegment Point="430,250" Size="200,75"></ArcSegment>
<ArcSegment Point="400,225" Size="30,25"></ArcSegment>
<ArcSegment Point="370,215" Size="200,200" SweepDirection="Clockwise" ></ArcSegment>
<ArcSegment Point="320,207" Size="150,200"></ArcSegment>
<BezierSegment Point1="305,207" Point2="230,200" Point3="295,175"></BezierSegment>
<ArcSegment Point="420,175" Size="570,500" SweepDirection="Clockwise"></ArcSegment>
<BezierSegment Point1="437,177" Point2="452,162" Point3="462,152"></BezierSegment>
<BezierSegment Point1="470,140" Point2="555,75" Point3="527,140"></BezierSegment>
<ArcSegment Point="455,210" Size="500,500" SweepDirection="Clockwise"></ArcSegment>
<BezierSegment Point1="445,220" Point2="450,280" Point3="545,220"></BezierSegment>
<ArcSegment Point="480,18" Size="120,115"></ArcSegment>
<ArcSegment Point="270,17" Size="520,100"></ArcSegment>
<BezierSegment Point1="260,17" Point2="250,15" Point3="228,34"></BezierSegment>
<BezierSegment Point1="218,34" Point2="200,33" Point3="180,20"></BezierSegment>
<ArcSegment Point="40,220" Size="140,121"></ArcSegment>
<ArcSegment Point="290,320" Size="690,600"></ArcSegment>
</PathFigure>
</PathGeometry>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingPath Storyboard.TargetName="Ellipse1"
Storyboard.TargetProperty="(Canvas.Left)"
PathGeometry="{DynamicResource Daytona}"
Duration="0:0:20" RepeatBehavior="Forever" Source="X" FillBehavior="Stop" />
<DoubleAnimationUsingPath Storyboard.TargetName="Ellipse1"
Storyboard.TargetProperty="(Canvas.Top)"
PathGeometry="{StaticResource Daytona}"
Duration="0:0:20" RepeatBehavior="Forever" Source="Y" FillBehavior="Stop" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</UserControl.Triggers>
<Canvas Height="357" Name="Canvas1" Width="631">
<Canvas.Background>
<ImageBrush ImageSource="/WpfCircuitLibrary;component/Images/Daytona2.png" />
</Canvas.Background>
<Ellipse Canvas.Left="292" Canvas.Top="328" Height="29" Name="Ellipse1" Stroke="Black" Width="29" Fill="#FF3DCA1F" />
<Path Canvas.Left="12" Canvas.Top="12" Height="336" Name="Daytona" Data="{StaticResource Daytona}" Stroke="Black" Width="607" StrokeThickness="5" />
<Button Content="Button" Height="30" Name="Button1" Width="92" DataContext="{Binding}" Canvas.Left="263" Canvas.Top="382" IsEnabled="{Binding}" />
</Canvas>
</UserControl>
The ElementHost Control is a Container for your Wpf UserControl, any public method that you create is accessable from the Windows.Form application. I would take the code that was in your userControls Button Click event and create a Public Sub then call that from your Windows Form's Button Click event. I am going to assume that you created the animation in your code behind.
Windows Form Form1.vb
Public Class Form1
Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click
UserControl11.runAnimation()
End Sub
Private Sub Button2_Click(sender As System.Object, e As System.EventArgs) Handles Button2.Click
UserControl11.runXamlStoryBoard()
End Sub
End Class
Wpf UserControl
Imports System.Windows.Media.Animation
Imports System.Windows.Controls
Public Class UserControl1
Public Sub runAnimation()
Dim da As DoubleAnimation = New DoubleAnimation
da.From = 30
da.To = 100
da.Duration = New Windows.Duration(TimeSpan.FromSeconds(1))
da.AutoReverse = True
Button1.BeginAnimation(Button.HeightProperty, da)
End Sub
Public Sub runXamlStoryBoard()
Dim sb As Storyboard = CType(FindResource("growButton"), Storyboard)
sb.Begin()
End Sub
Private Sub Button1_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles Button1.Click
runAnimation()
End Sub
End Class
UserControl1.Xaml
<UserControl x:Class="UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="116" d:DesignWidth="246">
<UserControl.Resources>
<Storyboard x:Key="growButton">
<DoubleAnimation
Storyboard.TargetName="Button1"
Storyboard.TargetProperty="Height"
From="30"
To="100"
Duration="0:0:1"
RepeatBehavior="4x" />
</Storyboard>
</UserControl.Resources>
<Grid>
<Button Content="Button" Height="23" HorizontalAlignment="Center" Name="Button1" VerticalAlignment="Center" Width="75" />
</Grid>
</UserControl>
Here is a working example of what you are wanting. I moved your Storyboard into the UserControl.Resources so a x:Key can be assigned so it is available in the CodeBehind. I then referenced in you Trigger as a Static Resource.
**UserControl1.xaml"
<UserControl x:Class="UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Height="372" Width="640">
<UserControl.Resources>
<PathGeometry x:Key="Daytona">
<PathFigure IsClosed="True" StartPoint="290,320">
<ArcSegment Point="290,320" Size="10,10" SweepDirection="Counterclockwise"></ArcSegment>
<ArcSegment Point="430,250" Size="200,75"></ArcSegment>
<ArcSegment Point="400,225" Size="30,25"></ArcSegment>
<ArcSegment Point="370,215" Size="200,200" SweepDirection="Clockwise" ></ArcSegment>
<ArcSegment Point="320,207" Size="150,200"></ArcSegment>
<BezierSegment Point1="305,207" Point2="230,200" Point3="295,175"></BezierSegment>
<ArcSegment Point="420,175" Size="570,500" SweepDirection="Clockwise"></ArcSegment>
<BezierSegment Point1="437,177" Point2="452,162" Point3="462,152"></BezierSegment>
<BezierSegment Point1="470,140" Point2="555,75" Point3="527,140"></BezierSegment>
<ArcSegment Point="455,210" Size="500,500" SweepDirection="Clockwise"></ArcSegment>
<BezierSegment Point1="445,220" Point2="450,280" Point3="545,220"></BezierSegment>
<ArcSegment Point="480,18" Size="120,115"></ArcSegment>
<ArcSegment Point="270,17" Size="520,100"></ArcSegment>
<BezierSegment Point1="260,17" Point2="250,15" Point3="228,34"></BezierSegment>
<BezierSegment Point1="218,34" Point2="200,33" Point3="180,20"></BezierSegment>
<ArcSegment Point="40,220" Size="140,121"></ArcSegment>
<ArcSegment Point="290,320" Size="690,600"></ArcSegment>
</PathFigure>
</PathGeometry>
<Storyboard x:Key="MyPathAnimation">
<DoubleAnimationUsingPath Storyboard.TargetName="Ellipse1"
Storyboard.TargetProperty="(Canvas.Left)"
PathGeometry="{DynamicResource Daytona}"
Duration="0:0:20" RepeatBehavior="Forever" Source="X" FillBehavior="Stop" />
<DoubleAnimationUsingPath Storyboard.TargetName="Ellipse1"
Storyboard.TargetProperty="(Canvas.Top)"
PathGeometry="{StaticResource Daytona}"
Duration="0:0:20" RepeatBehavior="Forever" Source="Y" FillBehavior="Stop" />
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource MyPathAnimation}" />
</EventTrigger.Actions>
</EventTrigger>
</UserControl.Triggers>
<Canvas Height="357" Name="Canvas1" Width="631">
<Canvas.Background>
<ImageBrush ImageSource="/WpfCircuitLibrary;component/Images/Daytona2.png" />
</Canvas.Background>
<Ellipse Canvas.Left="292" Canvas.Top="328" Height="29" Name="Ellipse1" Stroke="Black" Width="29" Fill="#FF3DCA1F" />
<Path Canvas.Left="12" Canvas.Top="12" Height="336" Name="Daytona" Data="{StaticResource Daytona}" Stroke="Black" Width="607" StrokeThickness="5" />
<Button Content="Button" Height="30" Name="Button1" Width="92" DataContext="{Binding}" Canvas.Left="263" Canvas.Top="382" IsEnabled="{Binding}" />
</Canvas>
</UserControl>
UserControl1.Xaml.vb
Imports System.Windows.Media.Animation
Public Class UserControl1
Public Sub runPathAnimation()
Dim sb As Storyboard = CType(FindResource("MyPathAnimation"), Storyboard)
sb.Begin()
End Sub
End Class
Form1
Public Class Form1
Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click
UserControl11.runPathAnimation()
End Sub
End Class