Button with custom ControlTemplate sometimes misses clicks - wpf

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"

Related

Creating button with specific geometry XAML

Please can anyone suggest a solution of my problem.
Most "custom buttons" on different tutorials based on standard geometry forms (triangle, rectangle, circle etc.) anŠ² changed only their appearance.
I trying to create button with specific geometry and changed it on mouse event.
what I have:
I created style where diskribe
I created a polygon in the form of a rectangle with rounded corners (this is important)
I created style where described my custom button, and in main window i added the Style attribute:
<Button Width="40" Margin="5,0,5,-15" DockPanel.Dock="Right" HorizontalAlignment="Right" Background="{x:Null}" BorderBrush="{x:Null}" Height="40" Style="{StaticResource ResourceKey=PLCButtonStyle}"/>
this is how i described geometry:
</Style.Resources>
<Setter Property="Cursor" Value="Hand"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}" >
<Grid>
<MAIN:RoundedCornersPolygon Name="Border" Points="0,0 75,0 75,15 75,30 0,30 "Stretch="Fill"
StrokeThickness="1" ArcRoundness="5" UseRoundnessPercentage="False" Stroke="Black" IsClosed="True
<MAIN:RoundedCornersPolygon.Fill>
<RadialGradientBrush RadiusX="1" RadiusY="1" GradientOrigin="0.7,0.3" >
<GradientStop Color="lightgray" Offset="0" />
<GradientStop Color="black" Offset="1" />
</RadialGradientBrush>
</MAIN:RoundedCornersPolygon.Fill>
</SCADA:RoundedCornersPolygon>
I need to animate the transition of certain points of the polygon from one coordinate to another.
from Points="0,0 75,0 75,15 75,30 0,30 "
to Points="0,0 60,0 75,15 60,30 0,30 "
what i need to do for this?

WPF Progress Bar in different colors

I am having a alarm status. I want to reflect the alarm status on the progress bar with the help of colors.
If an operator has handled the alarm till 30% status, so Progress Bar will show the 30% color and if Operator has handled till 60%. So Progress Bar will show the first 30% in red color and then next 30% in blue color.
I am setting the value of the progress bar to 30 and getting green color. My question is when i want to set it to 60% it will show green for first 30% and red for next.
Below is the example for you. Set MyProgressBarStyle for the ProgressBar. I have set the background of the progress bar as 30% red, 30% Green and 30% Blue using LinearGradientBrush. And reversed the PART_Indicator. So you need to use SetMyProgressBarValue function to set the percentage value for the ProgressBar. Try it its working for me.
XAML
<Grid Background="Gray">
<Grid.Resources>
<Style x:Key="MyProgressBarStyle" TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid MinHeight="14" MinWidth="200">
<Border Name="PART_Track" CornerRadius="2" BorderBrush="Transparent" BorderThickness="1" >
<Border.Background>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<LinearGradientBrush.GradientStops>
<GradientStop Color="red" Offset="0" ></GradientStop>
<GradientStop Color="red" Offset="0.3" ></GradientStop>
<GradientStop Color="Green" Offset=".3" ></GradientStop>
<GradientStop Color="Green" Offset=".3" ></GradientStop>
<GradientStop Color="Green" Offset=".6" ></GradientStop>
<GradientStop Color="Blue" Offset=".6" ></GradientStop>
<GradientStop Color="Blue" Offset="1" ></GradientStop>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border
Name="PART_Indicator"
CornerRadius="2"
Background="Gray"
BorderBrush="Transparent"
BorderThickness="1"
HorizontalAlignment="Right" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<ProgressBar x:Name="MyProgressBar" Style="{StaticResource MyProgressBarStyle}" Minimum="0" Maximum="100" Height="80" Value="20"></ProgressBar>
</Grid>
Function to set percentage value for MyProgressBar
public void SetMyProgressBarValue(Double percentageValue)
{
MyProgressBar.Value = 100 - percentageValue;
}

Changing a Buttons Background in XAML?

How do I get the following XAML code to integrate into a buttons background. I've tried so many ways but I'm struggling to get it work. PS I'm new at XAML.
<Viewbox Width="55.247" Height="55.247"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas Width="55.247" Height="55.247">
<Canvas>
<!-- button/circle -->
<Path StrokeThickness="1.0" Stroke="#ff335284" StrokeMiterLimit="1.0" Data="F1 M 54.747,27.624 C 54.747,42.603 42.603,54.747 27.624,54.747 C 12.644,54.747 0.500,42.603 0.500,27.624 C 0.500,12.644 12.644,0.500 27.624,0.500 C 42.603,0.500 54.747,12.644 54.747,27.624 Z">
<Path.Fill>
<RadialGradientBrush MappingMode="Absolute" GradientOrigin="392.717,-251.469" Center="392.717,-251.469" RadiusX="27.123" RadiusY="27.123">
<RadialGradientBrush.GradientStops>
<GradientStop Offset="0.00" Color="#ff00aae4"/>
<GradientStop Offset="1.00" Color="#ff2463a7"/>
</RadialGradientBrush.GradientStops>
<RadialGradientBrush.Transform>
<MatrixTransform Matrix="1.000,0.000,-0.000,-1.000,-365.093,-223.845" />
</RadialGradientBrush.Transform>
</RadialGradientBrush>
</Path.Fill>
</Path>
</Canvas>
</Canvas>
</Viewbox>
The following example replaces the standard Button Template with your design AND adds a content presenter so you can still set the content of the button.
<Button Content="OK" Width="75" Height="75">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Path StrokeThickness="1.0" Stroke="#ff335284" StrokeMiterLimit="1.0" Data="F1 M 54.747,27.624 C 54.747,42.603 42.603,54.747 27.624,54.747 C 12.644,54.747 0.500,42.603 0.500,27.624 C 0.500,12.644 12.644,0.500 27.624,0.500 C 42.603,0.500 54.747,12.644 54.747,27.624 Z">
<Path.Fill>
<RadialGradientBrush MappingMode="Absolute" GradientOrigin="392.717,-251.469" Center="392.717,-251.469" RadiusX="27.123" RadiusY="27.123">
<RadialGradientBrush.GradientStops>
<GradientStop Offset="0.00" Color="#ff00aae4"/>
<GradientStop Offset="1.00" Color="#ff2463a7"/>
</RadialGradientBrush.GradientStops>
<RadialGradientBrush.Transform>
<MatrixTransform Matrix="1.000,0.000,-0.000,-1.000,-365.093,-223.845" />
</RadialGradientBrush.Transform>
</RadialGradientBrush>
</Path.Fill>
</Path>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
Well you have multiple options to accomplish this. If you're literally just trying to put your Path in a button you can do it with minimal effort kind of like;
<Button Width="75" Height="75">
<!-- Embed our elements in a grid since Content can be set only once -->
<Grid>
<!-- Your Path -->
<Path StrokeThickness="1.0" Stroke="#ff335284" StrokeMiterLimit="1.0" Data="F1 M 54.747,27.624 C 54.747,42.603 42.603,54.747 27.624,54.747 C 12.644,54.747 0.500,42.603 0.500,27.624 C 0.500,12.644 12.644,0.500 27.624,0.500 C 42.603,0.500 54.747,12.644 54.747,27.624 Z">
<Path.Fill>
<RadialGradientBrush MappingMode="Absolute" GradientOrigin="392.717,-251.469" Center="392.717,-251.469" RadiusX="27.123" RadiusY="27.123">
<RadialGradientBrush.GradientStops>
<GradientStop Offset="0.00" Color="#ff00aae4"/>
<GradientStop Offset="1.00" Color="#ff2463a7"/>
</RadialGradientBrush.GradientStops>
<RadialGradientBrush.Transform>
<MatrixTransform Matrix="1.000,0.000,-0.000,-1.000,-365.093,-223.845" />
</RadialGradientBrush.Transform>
</RadialGradientBrush>
</Path.Fill>
</Path>
<!-- Your Button Text -->
<TextBlock Text="Button" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Button>
If you needed to get more technical / cleaner about it, you would just place it straight into a control template. Here's documentation on the WPF Button Control Template
Hope this helps, luckily there's also lots of tutorials out on the web for customizing a WPF button. If you want to elaborate on exactly what you'd like, like whether you're shooting for WPF or SL in particular (differences like VisualStateManager or Style Triggers) folks would likely be more useful. :)

Creating a block of text with Silverlight

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?

Cursor on Path doesn't appear in SilverLight

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.

Resources