All i am trying to do create rectangles with radial corners and content within them. Content can be any image, textual data or multimedia something like http://www.spicynodes.org/. so
How do I create that rectangle ( can i have xaml markup)
Can i have arrows from one rectangle to another if so how?
the nearest I got to was below but unable to add text data
<Grid Name="containerPanel" Width="800" Height="500" Background="AntiqueWhite" VerticalAlignment="Center" HorizontalAlignment="Center">
<Rectangle Name="centerNode" Width="300" Height="150" RadiusX="12" RadiusY="12" VerticalAlignment="Center">
<Rectangle.Effect>
<DropShadowEffect ShadowDepth="3" BlurRadius="2" Color="Black"></DropShadowEffect>
</Rectangle.Effect>
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Gray" Offset="0.1"></GradientStop>
<GradientStop Color="Beige" Offset="0.2"></GradientStop>
</LinearGradientBrush>
</Rectangle.Stroke>
<Rectangle.StrokeThickness>
2
</Rectangle.StrokeThickness>
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="AliceBlue" Offset="0.4" />
<GradientStop Color="White" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
Instead of using a Rectangle, you might want to use a container control. Assuming the content of your will consist of one element (i.e.: Either an image, either a textblock, either a ....), the first thing that comes to mind would be to use a Border, which will accept exactly one child element as its content:
<Border Width="300" Height="200" BorderBrush="Green" BorderThickness="5" CornerRadius="10">
<Border.Effect>
<DropShadowEffect ShadowDepth="5"/>
</Border.Effect>
<TextBlock Text="Inside the bounding box" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
As for the arrows going from one box to another:
Of course it's possible, but you will have to "connect" them manually. There's no out-of-the-box "connect and draw an arrow between these two elements" functionality.
Why not use a container like another grid, style it as you prefer, then add an image or textblock element inside it instead of a rectangle?
Related
How can I make a vertical Line (Path) whose height adjusts with its container? If the horizontal StackPanel height changes (see code below), I want the vertical Line (Path) to adjust its height so that it stretches always the top and bottom of its containing StackPanel.
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical">
</StackPanel>
<Path Data="M280,0 L280,300" Stretch="Uniform" Fill="#FFE45737" Margin="50,0,0,0" Width="2">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Offset="0" Color="#0C9D9D9D"/>
<GradientStop Offset="0.996" Color="#0C9D9D9D"/>
<GradientStop Color="#FF9D9D9D" Offset="0.25"/>
<GradientStop Color="#FF9D9D9D" Offset="0.75"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
</StackPanel>
With this code, the Path sticks with fixed height there although StackPanel height changes.
I do not understand clearly what you want but Path in <ViewBox></Viewbox>. Let me know it is what you want or add more information.
When I was testing a new interface for a button I noticed a blur appearing during run-time that was not present during design-time. I tracked it down to the auto property.
The image below displays to button during run-time the left has its height and width set to auto and the right has its height and width set manually. As you can see there is a blur on the left button.
Why is this caused? Is there any way of getting round it?
Thanks.
Relevent XAML:
<Border Padding="1,1,1,1" Height="Auto" Width="Auto">
<!-- Border Properties -->
<Border.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="8"/>
</Border.Effect>
<Border.Background>
<SolidColorBrush x:Name="BorderBrush" Color="Gray"/>
</Border.Background>
<!-- End Properties -->
<!-- Children -->
<Grid>
<!-- Properties -->
<Grid.Background>
<LinearGradientBrush x:Name="BackgroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop x:Name="BackgroundLightColor" Color="#FF282828" Offset="0.572"/>
<GradientStop Color="#FF3C3C3C" Offset="0"/>
</LinearGradientBrush>
</Grid.Background>
<!-- End Properties -->
<!-- Children -->
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}" Margin="20,5,20,5">
<TextBlock.Foreground>
<SolidColorBrush x:Name="ForegroundBrush" Color="#FFBBBBBB"/>
</TextBlock.Foreground>
</ContentPresenter>
<!-- End Children -->
</Grid>
<!-- End Children -->
</Border>
</ControlTemplate>
<!-- End Template -->
Left Button:
<Border Padding="1,1,1,1" Height="auto" Width="auto">
Right Button:
<Border Padding="1,1,1,1" Height="29" Width="72">
It looks like a subpixel rendering issue, try setting SnapsToDevicePixels or UseLayoutRounding on your application or control.
My Button with a custom ControlTemplate does not respond to every click. I have no idea why, since it is totally random if the click works or not.
ControlTemplate:
<ControlTemplate x:Key="KreisPlus">
<Path Data="M74,37.5 C74,57.658393 57.658393,74 37.5,74 C17.341607,74 1,57.658393 1,37.5 C1,17.341607
17.341607,1 37.5,1 C57.658393,1 74,17.341607 74,37.5 z M32.113861,13.5 L43.386139,13.5 43.386139,
32.613861 62.5,32.613861 62.5,43.886139 43.386139,43.886139 43.386139,63 32.113861,63 32.113861,
43.886139 13,43.886139 13,32.613861 32.113861,32.613861 z"
Height="20" Stretch="Fill" Stroke="#FFD7D7D7" Width="20">
<Path.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF1F71D5" />
<GradientStop Color="White" Offset="0.94" />
<GradientStop Color="#FF6499E0" Offset="0.78" />
</RadialGradientBrush>
</Path.Fill>
</Path>
</ControlTemplate>
<Button Click="Button_Click" Template="{StaticResource ResourceKey=KreisPlus}" />
just try this code sample and see is that what you expect?
<ControlTemplate x:Key="KreisPlus" TargetType="{x:Type Button}">
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent" >
<Path Data="M74,37.5 C74,57.658393 57.658393,74 37.5,74 C17.341607,74 1,57.658393 1,37.5 C1,17.341607 17.341607,1 37.5,1 C57.658393,1 74,17.341607 74,37.5 z M32.113861,13.5 L43.386139,13.5 43.386139,32.613861 62.5,32.613861 62.5,43.886139 43.386139,43.886139 43.386139,63 32.113861,63 32.113861,43.886139 13,43.886139 13,32.613861 32.113861,32.613861 z"
Height="20"
Stretch="Fill"
Stroke="#FFD7D7D7"
Width="20">
<Path.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF1F71D5" />
<GradientStop Color="White"
Offset="0.94" />
<GradientStop Color="#FF6499E0"
Offset="0.78" />
</RadialGradientBrush>
</Path.Fill>
</Path>
</Grid>
</ControlTemplate>
Now the path is inside the Grid and so it can respond to the click. This will take the entire area and only the path in the center. So if you click on the button anywhere even outside path will execute the click. If you don't want this and you want the path should respond to the click just change horizontal and vertical alignment as center
HorizontalAlignment="Center"
VerticalAlignment="Center"
I am trying to draw a circle with a glass effect using Alpha. I am successful in creating that by using the below XAML. The cursor changes to Hand for the Ellipses, but it doesn't affect Path. Basically, I want to show "hand" cursor wherever the mouse appears over the circle. I hope this is not a known issue and I am missing something small. Any help is really appreciated.
<Ellipse Cursor="Hand"
Width="200"
Height="200"
Fill="#C42222" Canvas.Left="0" Canvas.Top="0" />
<Ellipse Cursor="Hand" Width="200" Height="200" Canvas.Left="0" Canvas.Top="0">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.3,0.7">
<GradientStop
Offset="0"
Color="#00000000" />
<GradientStop
Offset="1"
Color="#66000000" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Path Cursor="Hand" Stretch="Fill" Height="114.598" Width="198.696" Data="M98.388435,-1.3301961 C98.388435,-1.3301961 117.1151,-3.094949 141.69321,8.1370029 C156.42262,14.868201 167.67375,23.694145 175.66234,33.657074 C183.67349,43.648144 181.90166,37.8708 191.90166,58.8708 C201.90166,79.870796 199.16658,89.212738 199.13568,92.90377 C198.77556,135.92146 175.45959,97.59124 156.75465,81.024025 C140.98892,67.060104 117.41241,64.357407 114.41241,64.357407 C111.4124,64.357407 83.061241,60.114159 63.061195,71.114143 C43.061146,82.114136 39.637829,86.429352 22.999804,100.99996 C6.5005584,115.44904 2.9997537,112.99996 2.9997537,112.99996 C2.9997537,112.99996 -1.1832786,97.194221 1.9997513,81.999893 C7.2054667,57.150185 13.999762,47.999939 17.999771,42.999943 C21.999781,37.99995 29.935833,23.400871 54.053131,10.21261 C78.91642,-3.3835876 98.388435,-1.3301961 98.388435,-1.3301961 z">
<Path.Fill>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#55FFFFFF" Offset="0"/>
<GradientStop Color="#11FFFFFF" Offset="0.5"/>
<GradientStop Color="#00FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
I want to show "hand" cursor wherever the mouse appears over the circle.
The hand cursor appears in my testing of your Path when the mouse is over the path. However perhaps the clue might be in your description above. The Path doesn't describe a circle more like a crescent. Add Stroke="Black" StrokeThickness="1" to the path so that you can see its outline and test that the cursor does actually work.
The other possiblity is in your actual Xaml that there is something else that has a hight z-index or appears later in the Xaml document order that overlays the Path.
Is there an easy way to give rounded corners to the boundary of a DataGrid in Silverlight 3?
Thanks a bunch!
I just answered a similar question here for giving rounded corners to any FrameworkElement by attaching a Blend clipping behavior with a specified CornerRadius.
You could write your own logic for the clipping behavior or use the one from the Expression Blend Samples CodePlex page. It would then be as simple referencing System.Windows.Interactivity.dll from the Blend SDK and dropping the behavior on the element in Blend or writing out the XAML:
<data:DataGrid>
<i:Interaction.Behaviors>
<samples:ClippingBehavior CornerRadius="15"/>
</i:Interaction.Behaviors>
</data:DataGrid>
Its a nice reusable way to give rounded corners to any element without relying on a border or an element with corner radii properties.
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF508EB1" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid Background="{x:Null}" x:Name="MainGrid" >
<Grid.Effect>
<DropShadowEffect />
</Grid.Effect>
<...>
</Grid>
</Border>
<Border CornerRadius="5">
<toolkit:DataGrid />
</Border>