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>
Related
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"/>
I'm relatively new to some of Xaml features..
I'm trying to implement this progressbar with an arrow on top that shows the progress indicator in addition to the filled bar. I used polygon to display the arrow and just need to translate it in X direction to display it on top of the progrssBar. However, the binding applied below .
Binding PlaybackProgressTip
which is a double is causing the code to crash. Can someone please tell me how to bind the TranslateTransform.X to the double value or I need to do something else?
<Grid x:Name="grid" VerticalAlignment="Top" Margin="0,34,0,0" Grid.Row="1" Height="18" d:LayoutOverrides="VerticalAlignment, Width, VerticalMargin">
<ProgressBar x:Name="Progress" Maximum="1" Value="{Binding PlaybackProgress}" VerticalAlignment="Center" Background="LightGray" Height="6" Visibility="Collapsed" IsIndeterminate="False" Foreground="DarkBlue"/>
<Image x:Name="ProgressComplete" Source="/Images/checkbox.png" Height="18" VerticalAlignment="Center" HorizontalAlignment="Center" Visibility="Collapsed" Stretch="Uniform"/>
<Polygon Points="0,0 8,0, 4,5" Stroke="Black" Fill="Black" Margin="0,-2,0,0">
<Polygon.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="ProgressPositionTranslate" X="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PlaybackProgressTip}" />
</TransformGroup>
</Polygon.RenderTransform>
</Polygon>
</Grid>
We have some xaml:
<Style TargetType="local:V_RelLine">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:V_RelLine">
<Grid x:Name="LayoutRoot">
<VisualStateManager.VisualStateGroups>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Ellipse x:Name="startArrow" Height="20" Width="60" Fill="Green" Stroke="Blue" Visibility="Visible" />
<Path x:Name="LinePathPart" Visibility="Visible" Stroke="Red" StrokeDashArray="2 2" StrokeThickness="2"
>
<Path.Data>
<PathGeometry x:Name="LinePathGeometry" >
<PathFigure x:Name="linePathBezierFigure" >
<BezierSegment x:Name="linePathBezierSegment" />
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Ellipse x:Name="endArrow" Height="20" Width="20" Fill="Red" Stroke="Red" Visibility="Visible" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And in the code behind:
LinePathBezierFigure.StartPoint = startPoint;
Canvas.SetLeft(startArrow, startPoint.X);
Canvas.SetTop(startArrow, startPoint.Y);
/* similar for endArrow */
At runtime, startArrow and endArrow end up at the same point (even though they were set to different locations), as though they ended up at 0,0.
In fact, a subsequent call to Canvas.GetLeft(startArrow) show that it is at 0,0.
What is going on? Why are different objects in the same template, assigned the same coordinates, ending up in different locations?
Thanks for any insight in to this....
Just a thought but Canvas.Left and Canvas.Top normally only work well when the elements are placed in a Canvas rather than a Grid like you are using currently.
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"/>
Does anyone know of a place to download pre-built or defined silverlight (2.0/3.0) shapes?
It sounds like you need to get a feel for Xaml - maybe these tutorials would help: http://silverlight.net/learn/videocat.aspx?cat=2#HDI2Controls
The site silverzine.com also has some good Xaml how-tos. The specific instance you commented on, like a a rectangle with rounded edges and a bullet list could be constructed like this:
<Border CornerRadius="20" BorderThickness="4" Width="400" Height="300" BorderBrush="Black">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Black" Offset="0.0" />
<GradientStop Color="White" Offset="1.0" />
</LinearGradientBrush>
</Border.Background>
<StackPanel Margin="10" Orientation="Vertical">
<ListBox Height="200">
<ListBox.Items>
<StackPanel Orientation="Horizontal">
<Ellipse Width="10" Height="10" Stroke="Black" StrokeThickness="15" Fill="Black"/>
<TextBlock Margin="10,4,0,0" Text="Item 1"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Ellipse Width="10" Height="10" Stroke="Black" StrokeThickness="15" Fill="Black"/>
<TextBlock Margin="10,4,0,0" Text="Item 2"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Ellipse Width="10" Height="10" Stroke="Black" StrokeThickness="15" Fill="Black"/>
<TextBlock Margin="10,4,0,0" Text="Item 3"/>
</StackPanel>
</ListBox.Items>
</ListBox>
<Button Margin="10" Content="Click Me!"/>
</StackPanel>
</Border>
To answer the question, I don't know of a site that has examples that the one you said you were looking for. I think a good strategy would be to narrow down your search a bit and tackle one thing at a time. Start with the border, then look around for gradients, etc. Good luck!