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.
Related
Path with LinearGradientBrush:
<Path Data="M76,261 C273,301 166.53234,85.564862 274.5,301.5"
HorizontalAlignment="Left"
Height="148.664"
Margin="76,203.836,0,0"
Stretch="Fill"
VerticalAlignment="Top"
Width="323.5"
StrokeThickness="10">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.05,0.0"
StartPoint="0.0,0.0"
SpreadMethod="reflect">
<GradientStop Color="Blue" Offset="0.0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
How to apply GradientBrush to Path so that transition lines (gradient stops) are perpendicular to tangent to Path at every point of Path?
Something like this (i'm not a pro in Photoshop):
I have two solutions targeting the same 4.5 framework. Both projects uses the same version of dlls. But one is showing a progressbar without any effect. I just copied and pasted the code from one to another. One is with glossy effect and having animations in it but another is just static. What's wrong with it?
<ProgressBar HorizontalAlignment="Left" Height="30" Margin="3,0,0,0" Foreground="#FF007B00" Grid.Column="1" VerticalAlignment="Center" Width="176" Opacity="0.9" BorderThickness="0" Value="80">
<ProgressBar.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
<GradientStop Color="#FFBABABA" Offset="0"/>
<GradientStop Color="#FFC7C7C7" Offset="0.014"/>
<GradientStop Color="#FFE63B09" Offset="1"/>
</LinearGradientBrush>
</ProgressBar.Background>
</ProgressBar>
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.
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?
Is there any method exist to create vignetting/frame effect on picturebox, ie another picturebox with png image as overlay/mask? I don't want to see sharp edges between picture and background.
You could use OpacityMask : something like
<Image Width="200" Source="C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg">
<Image.OpacityMask>
<RadialGradientBrush>
<GradientStop Offset="0.8" Color="#ffff"></GradientStop>
<GradientStop Offset="1" Color="#0fff"></GradientStop>
</RadialGradientBrush>
</Image.OpacityMask>
</Image>
would give a vignette effect.