I have the following XAML :
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DockPanel Margin="5">
<Path Stroke="Black" StrokeThickness="1" Fill="White" DockPanel.Dock="Left" VerticalAlignment="Center">
<Path.Data>
<GeometryGroup>
<LineGeometry StartPoint="10,0" EndPoint="0,10" />
<LineGeometry StartPoint="0,10" EndPoint="10,20" />
</GeometryGroup>
</Path.Data>
</Path>
<Rectangle Stroke="Black" RadiusX="10" RadiusY="10"/>
</DockPanel>
</Page>
It creates like a speech bubble. However I would like the part where the two join to be white or not to have any stroke.
Not very clever, but perhaps sufficient:
<DockPanel Margin="5">
<Path Stroke="Black" StrokeThickness="1"
Fill="White" DockPanel.Dock="Left" VerticalAlignment="Center"
Panel.ZIndex="1" Margin="0,0,-1,0" Data="M10,0 L0,10 10,20"/>
<Rectangle Stroke="Black" RadiusX="10" RadiusY="10"/>
</DockPanel>
A better solution might be to create a CombinedGeometry from the Path and the Rectangle.
If you have access to Blend you can use the Callout control, which does exactly what you want.
It resides in this assembly:
C:\Program Files (x86)\Microsoft SDKs\Expression\Blend\.NETFramework\v4.0\Libraries\Microsoft.Expression.Drawing.dll
and is used like that:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" x:Class="WpfApplication1.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ed:Callout AnchorPoint="-0.061,0.716" CalloutStyle="RoundedRectangle" Content="Callout" Fill="#FFF4F4F5" FontSize="14.667" HorizontalAlignment="Left" Height="109" Margin="61,78,0,0" Stroke="Black" VerticalAlignment="Top" Width="375"/>
</Grid>
</Window>
Edit: if you have Blend (for VS 2012) you can easily draw a path yourself that looks like a callout.
Example:
<Path Data="M110.029,0.5 L305.895,0.5 C314.17927,0.50000358 320.895,7.2157323 320.895,15.500005 L320.895,144.202 C320.895,152.48627 314.17927,159.202 305.895,159.202 L110.029,159.202 C101.74473,159.202 95.028999,152.48627 95.029,144.202 L95.029,119.139 0.5,94.029644 94.530329,44.776012 95.029,69.723011 95.029,15.500005 C95.028999,7.2157323 101.74473,0.50000358 110.029,0.5 z" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="159.702" Margin="122.366,45.642,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="321.395"/>
Related
I know this question has already been answered, as I have followed the instructions of these answers. I have a .SVG image of an icon, which I am trying to convert into useable XAML code, I am using my images like this;
<ControlTemplate x:Uid="ControlTemplate_9" x:Key="IconTemplate">
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Name="svg2" Width="24" Height="16" ToolTip="IconToolTip.">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path16" Fill="#FFFCF0F0">
<Path.Data>
<PathGeometry Figures=" M 22.30" FillRule="NonZero"/>
</Path.Data>
</Path>
</Canvas>
</Viewbox>
</ControlTemplate>
When I picked up this system most of these were already provided, but my issue is adding more to it. When using programs such as Inkscape or printing to PDF and opening the .fpage file I am getting .XAML along the lines of -
<?xml version="1.0" encoding="UTF-8"?>
<!--This file is NOT compatible with Silverlight-->
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Name="svg2" Width="24" Height="16">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<!--Unknown tag: metadata-->
<!--Unknown tag: sodipodi:namedview-->
<Rectangle xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="24" Height="16" RadiusX="4" RadiusY="4" Name="Rounded_Rectangle_1" Fill="#000000"/>
<Rectangle xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="11" Canvas.Top="3" Width="2" Height="6" Name="rect9" Fill="#000000"/>
<Image xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="image11" Canvas.Left="11" Canvas.Top="11" Source="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQAAAABazTCJAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfgCRoPHAwMuTLjAAAADElEQVQI12M4wHAAAAMEAYHFO6KpAAAAAElFTkSuQmCC" Width="2" Height="2"/>
</Canvas>
</Viewbox>
The latter will not compile and causes the program to crash. So my extension to the previous questions would be, how do I use the latter XAML in my codebase without directly having an image in the project folder or how do I convert this into useable path data.
What I have done and which is actually working perfectly is to remove all the part with xml:
<Viewbox Stretch="Uniform">
<Canvas Name="svg2" Width="24" Height="16">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<Rectangle Width="24" Height="16" RadiusX="4" RadiusY="4" Name="Rounded_Rectangle_1" Fill="#000000"/>
<Rectangle Canvas.Left="11" Canvas.Top="3" Width="2" Height="6" Name="rect9" Fill="#000000"/>
<Image Name="image11" Canvas.Left="11" Canvas.Top="11" Source="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQAAAABazTCJAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfgCRoPHAwMuTLjAAAADElEQVQI12M4wHAAAAMEAYHFO6KpAAAAAElFTkSuQmCC" Width="2" Height="2"/>
</Canvas>
</Viewbox>
And I have added them to a ResourceDictionary, so they can be used in the whole project.
<Viewbox x:Key="MyIcon" x:Shared="False" Stretch="Uniform">
<Canvas Name="svg2" Width="24" Height="16">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<Rectangle Width="24" Height="16" RadiusX="4" RadiusY="4" Name="Rounded_Rectangle_1" Fill="#000000"/>
<Rectangle Canvas.Left="11" Canvas.Top="3" Width="2" Height="6" Name="rect9" Fill="#000000"/>
<Image Name="image11" Canvas.Left="11" Canvas.Top="11" Source="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQAAAABazTCJAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfgCRoPHAwMuTLjAAAADElEQVQI12M4wHAAAAMEAYHFO6KpAAAAAElFTkSuQmCC" Width="2" Height="2"/>
</Canvas>
</Viewbox>
I've made a circle for display the status of a connection for my DB, it's working nice but I want to make it look like a bulb with glass effects.
<Canvas Visibility="Visible" x:Name="connection_red" Grid.Column="1">
<Ellipse
Fill="Red"
Height="13"
Width="13"
Margin="0,7,80,0"
StrokeThickness="1"
Stroke="White"/>
</Canvas>
I have visited many online tutorials, but they use too much code and I do not want to use 50 lines of code to achieve this effect. Someone knows how to do to get the effect glass bulb in a few lines of code? You can show me the way?
This is the actual preview:
You need to either specify the opacity seperately...
<Ellipse Fill="#FF0000" Opacity="0.25"
Height="130"
Width="130"
Margin="0,7,80,0"
StrokeThickness="1"
Stroke="White" />
...or use a SolidColorBrush...
<Canvas Visibility="Visible" x:Name="connection_red" Grid.Column="1">
<Ellipse Height="130"
Width="130"
Margin="0,7,80,0"
StrokeThickness="1"
Stroke="White">
<Ellipse.Fill>
<SolidColorBrush>
<SolidColorBrush.Color>
<Color A="25" R="255" G="0" B="0" />
</SolidColorBrush.Color>
</SolidColorBrush>
</Ellipse.Fill>
</Ellipse>
Would be good though if you could clarify exactly what type of effect you're after.
<Canvas Visibility="Visible" x:Name="connection_red" Grid.Column="1">
<Ellipse
Fill="#7FFF0000"
Height="13"
Width="13"
Margin="0,7,80,0"
StrokeThickness="1"
Stroke="White"/>
</Canvas>
Below is the full XAML for the WPF application, no codebehind. On computers that have Expression Blend 4 installed, the following application works. However, on machines that do not have Blend, the application crashes. This is extremely simplistic, but it appears that the [i:Interaction.Behaviors] portion is what is causing the issue, which is a behavior from Blend that creates a smooth animation.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
x:Class="WpfApplication12.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<WrapPanel>
<i:Interaction.Behaviors>
<ei:FluidMoveBehavior AppliesTo="Children"/>
</i:Interaction.Behaviors>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Margin="10"/>
</WrapPanel>
</Grid>
You should ship System.Windows.Interactivity.dll with your application. Go to properties of that DLL in the references of you project and set Copy Local property to True. After that this assembly will be copied to the output folder of the project.
You need to include System.Windows.Interactivity.dll which is located at (Blend 3 pathing) ...Program Files\Microsoft SDKs\Expression\Blend 3\Interactivity\Libraries\WPF
That file is redistributable as defined by (Blend 3 pathing) ...Program Files\Microsoft SDKs\Expression\Blend 3\Redist.en.txt
Is it possible to create a Line in XAML (without any C# code behind) to align a line inside of a layout container such as a Grid?
I'd like to effectively have:
<Grid>
<Line StrokeThickness="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
Stroke="Red"/>
</Grid>
I need to use StrokeDashArray and StrokeDashOffset, otherwise I would just use a Border control with the BorderThickness set to "0,0,0,1"...
Thanks for any ideas!
To elaborate on kanchirk's response, this works for me:
<Path StrokeThickness="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
Data="M0,0 L1,0"
Stretch="Fill"
StrokeEndLineCap="Square"
StrokeStartLineCap="Square"
Stroke="Red"/>
You can also the same thing with a Line:
<Line StrokeThickness="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
X2="1"
Stretch="Fill"
StrokeEndLineCap="Square"
StrokeStartLineCap="Square"
Stroke="Red"/>
I think you need to use Path like this
<Grid x:Name="LayoutRoot" Background="White">
<Path Fill="Red" Stretch="Fill" Stroke="Black" StrokeDashArray="1" Height="4" Margin="8,0,7,7" VerticalAlignment="Bottom" UseLayoutRounding="False" Data="M8,127 L457,127" StrokeThickness="13"/>
</Grid>
Hope this Helps. Expression Blend is a must have for this kind of Challenges or even VS 2010 RC1 (For now)
How about this?
<Line x:Name="line"
StrokeThickness="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
Stroke="Red"
X2="{Binding ActualWidth, ElementName=line, Mode=OneWay}"
Stretch="Fill"
StrokeStartLineCap="Square"
StrokeEndLineCap="Square"/>
I have button Content that I want to use in multiple buttons on a UserControl in my Silverlight application. Here is the code for one button:
<Grid x:Name="LayoutRoot" Background="White">
<Button Grid.Column="1" IsEnabled="{Binding PrivilegeChanged}" Height="24" Width="24">
<Button.Content>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="UndoIcon" Width="16" Height="16" Clip="F1 M 0,0L 16,0L 16,16L 0,16L 0,0" UseLayoutRounding="False">
<Canvas x:Name="Arrow_2" Width="16" Height="16" Canvas.Left="0" Canvas.Top="0">
<Path Width="17.0154" Height="17" Canvas.Left="-0.5" Canvas.Top="-0.499999" Stretch="Fill"
StrokeLineJoin="Round" Stroke="#FF006432" Fill="#FF00C800"
Data="F1 M 12.5819,16C 14.1685,12.7951 14.1052,6.14911 11.0969,4.25C 9.23816,3.07665 6.71915,3.4789 5.40404,5.25L 8.12669,8.25L 0,8.91667L 0,9.53674e-007L 3.17642,3.25C 4.16648,1.91667 5.52584,0.61155 7.13664,0.25C 9.85332,-0.359774 13.4395,0.629333 15.0571,2.91667C 17.402,6.23256 15.0026,12.7401 12.5819,16"/>
</Canvas>
</Canvas>
</Button.Content>
</Button>
</Grid>
How can I make Button.Content reusable without removing the button outline?
The easiest approach would be to stick your button content design in its own UserControl :-
<UserControl x:Class="SilverlightApplication1.MyButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Canvas Width="16" Height="16" Clip="F1 M 0,0L 16,0L 16,16L 0,16L 0,0" UseLayoutRounding="False">
<Canvas Width="16" Height="16" Canvas.Left="0" Canvas.Top="0">
<Path Width="17.0154" Height="17" Canvas.Left="-0.5" Canvas.Top="-0.499999" Stretch="Fill"
StrokeLineJoin="Round" Stroke="#FF006432" Fill="#FF00C800"
Data="F1 M 12.5819,16C 14.1685,12.7951 14.1052,6.14911 11.0969,4.25C 9.23816,3.07665 6.71915,3.4789 5.40404,5.25L 8.12669,8.25L 0,8.91667L 0,9.53674e-007L 3.17642,3.25C 4.16648,1.91667 5.52584,0.61155 7.13664,0.25C 9.85332,-0.359774 13.4395,0.629333 15.0571,2.91667C 17.402,6.23256 15.0026,12.7401 12.5819,16"/>
</Canvas>
</Canvas>
</UserControl>
Now you can create multiple instances of this user control where ever you need this content:-
<UserControl x:Class="SilverlightApplication1.Test"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SilverlightApplication1"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Orientation="Horizontal">
<Button Grid.Column="1" IsEnabled="{Binding PrivilegeChanged}" Height="24" Width="24" Margin="2">
<local:MyButton />
</Button>
<Button Grid.Column="1" IsEnabled="{Binding SomethingElseChanged}" Height="24" Width="24" Margin="2">
<local:MyButton />
</Button>
</StackPanel>
</Grid>
</UserControl>
Normally you would create a Template that creates the custom layout for your button. A quicker and more immediate solution for you would be to set the content within a Style, and apply the style to buttons you need.
Define the style with your content:
<Window.Resources>
<Style x:Key="ButtonArrowStyle" TargetType="Button">
<Setter Property="Content">
<Setter.Value>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="UndoIcon" Width="16" Height="16" Clip="F1 M 0,0L 16,0L 16,16L 0,16L 0,0" UseLayoutRounding="False">
<Canvas x:Name="Arrow_2" Width="16" Height="16" Canvas.Left="0" Canvas.Top="0">
<Path Width="17.0154" Height="17" Canvas.Left="-0.5" Canvas.Top="-0.499999" Stretch="Fill"
StrokeLineJoin="Round" Stroke="#FF006432" Fill="#FF00C800"
Data="F1 M 12.5819,16C 14.1685,12.7951 14.1052,6.14911 11.0969,4.25C 9.23816,3.07665 6.71915,3.4789 5.40404,5.25L 8.12669,8.25L 0,8.91667L 0,9.53674e-007L 3.17642,3.25C 4.16648,1.91667 5.52584,0.61155 7.13664,0.25C 9.85332,-0.359774 13.4395,0.629333 15.0571,2.91667C 17.402,6.23256 15.0026,12.7401 12.5819,16"/>
</Canvas>
</Canvas>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
And then define a button to use the style:
<Button Style="{StaticResource ButtonArrowStyle}"/>