We Keep Coding

How to change the roundness of a button in a generic way

I am currently working on making my WPF application a little bit more generic.
Up to this point, for each button I wanted to create, I used a different style to modify roundness (and it creates a lot of useless code).
Using the following code I've managed to create a variable I can change from the XAML file, but I cannot link it to the roundness itself.
Could anyone please tell me what I am doing wrong? I already have checked on so many forums but no one seems to have the answer other than "don't do it in a generical way".
I can precise that everything is compiling and the style is otherwise correctly applied to the button (there is no xaml linking problem).
The style I am using:
<Style x:Key="AwakeButton" TargetType="{x:Type customcontrols:AwakeButton}" BasedOn="{StaticResource {x:Type Button}}"
xmlns:extensions="Awake.Services.Properties:Extensions">
<Setter Property="customcontrols:AwakeButton.BorderRoundness" Value="4.0"/>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="{Binding Path=BorderRoundness}" />
<!--<Setter Property="CornerRadius" Value="10" />-->
</Style>
</Style.Resources>
</Style>
The overload of the button I created to do so:
public class AwakeButton : Button
{
public AwakeButton()
{
}
public static DependencyProperty BorderRoundnessProperty =
DependencyProperty.RegisterAttached("BorderRoundness", typeof(double), typeof(AwakeButton));
public static void SetBorderRoundness(UIElement element, double value)
{
element.SetValue(BorderRoundnessProperty, value);
}
public static double GetBorderRoundness(UIElement element)
{
return (double)element.GetValue(BorderRoundnessProperty);
}
}
How I am using it in the page:
<customcontrols:AwakeButton Style="{StaticResource AwakeButton}" Margin="142,115,0,0" Width="136" Height="167" BorderRoundness="5">

You have to bind the BorderRoundness to the parent AwakeButton, otherwise it is resolved using the current DataContext, which does not contain this property. Furthermore, if you derive from Button, you do not have to make the dependency property attached, you could just register a normal one using the Register(...) method. Also make DPs static and readonly.
<Setter Property="CornerRadius" Value="{Binding BorderRoundness, RelativeSource={RelativeSource AncestorType={x:Type local:AwakeButton}}}" />
If you do not change anything special about the button, you could also create attached properties instead of a dedicated sub type just for exposing a BorderRoundness property.
public static class ButtonProperties
{
public static readonly DependencyProperty BorderRoundnessProperty =
DependencyProperty.RegisterAttached("BorderRoundness", typeof(double), typeof(ButtonProperties));
public static void SetBorderRoundness(UIElement element, double value)
{
element.SetValue(BorderRoundnessProperty, value);
}
public static double GetBorderRoundness(UIElement element)
{
return (double)element.GetValue(BorderRoundnessProperty);
}
}
You can refer to the BorderRoundness using attached property binding syntax (parentheses).
<Style x:Key="AwakeButton" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="local:ButtonProperties.BorderRoundness" Value="4.0"/>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="{Binding (local:ButtonProperties.BorderRoundness), RelativeSource={RelativeSource AncestorType={x:Type Button}}}" />
</Style>
</Style.Resources>
</Style>
You use regular button now with the newly created attached border roundness property.
<Button Grid.Row="0" Style="{StaticResource AwakeButton}" Margin="142,115,0,0" Width="136" Height="167" local:ButtonProperties.BorderRoundness="5"/>

The roundness is applied as CornerRadius to the Border of the Button. The Border is defined in the ControlTemplate of the Button. The ControlTemplate defines the appearance of a control.
In other words, you need to delegate the property values to the related elements in the ControlTemplate.
To delegate the values to the ControlTemplate, you have to override this template and bind the templated parents properties to the template elements:
In your AwakeButton define the BorderRoundness property as simple DependencyProperty (not attached) and the override the default style definition, so that the AwakeButton will use its own default Style. This way the Button is reusable withgout having to redefine the Style each time you weant to use it, which is especially important wjen you publish your project as library:
AwakeButton.cs
public class AwakeButton : Button
{
public static readonly DependencyProperty BorderRoundnessProperty = DependencyProperty.Register(
"BorderRoundness",
typeof(Thickness),
typeof(AwakeButton),
new PropertyMetadata(default(Thickness)));
public Thickness DestinationPath
{
get => (Thickness) GetValue(AwakeButton.BorderRoundnessProperty);
set => SetValue(AwakeButton.BorderRoundnessProperty, value);
}
static AwakeButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(AwakeButton), new FrameworkPropertyMetadata(typeof(AwakeButton)));
}
}
Generic.xaml.cs
This file is located in the Themes folder and contains all default styles. WPF will automatically check this file for a default style and apply it if no other Style override was found.
<Style TargetType="AwakeButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="AwakeButton">
<Border BorderBrush={TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="{TemplateBinding BorderRoundness}">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Stayle>
Example
<Grid>
<AwakeButton BorderRoundness="8" />
</Grid>
But if you want to make it really general, using an attached property, you have to make a attached behavior. The following code works with every DependencyObject that contains a Border as child in its visual tree:
class Element : DependencyObject
{
#region CornerRoundness attached property
public static readonly DependencyProperty CornerRoundnessProperty = DependencyProperty.RegisterAttached(
"CornerRoundness",
typeof(CornerRadius),
typeof(Element),
new PropertyMetadata(default(CornerRadius), Element.OnCornerRoundnessChanged));
public static void SetCornerRoundness(DependencyObject attachingElement, CornerRadius value) =>
attachingElement.SetValue(Element.CornerRoundnessProperty, value);
public static CornerRadius GetCornerRoundness(DependencyObject attachingElement) =>
(CornerRadius) attachingElement.GetValue(Element.CornerRoundnessProperty);
#endregion CornerRoundness attached property
private static void OnCornerRoundnessChanged(DependencyObject attachingElement, DependencyPropertyChangedEventArgs e)
{
if (Element.TryFindVisualChildElement(attachingElement, out Border elementBorder))
{
elementBorder.CornerRadius = (CornerRadius) e.NewValue;
}
}
public static bool TryFindVisualChildElement<TChild>(DependencyObject parent, out TChild resultElement)
where TChild : DependencyObject
{
resultElement = null;
if (parent is Popup popup)
{
parent = popup.Child;
if (parent == null)
{
return false;
}
}
for (var childIndex = 0; childIndex < VisualTreeHelper.GetChildrenCount(parent); childIndex++)
{
DependencyObject childElement = VisualTreeHelper.GetChild(parent, childIndex);
if (childElement is TChild child)
{
resultElement = child;
return true;
}
if (Element.TryFindVisualChildElement(childElement, out resultElement))
{
return true;
}
}
return false;
}
}
Example
<StackPanel>
<Button Element.CornerRoundness="8" />
<ToggleButton Element.CornerRoundness="8" />
</StackPanel>

How to link InkToolbar to an InkCanvas which is inside CustomControl?

I am creating a CustomControl which contain InkCanvas. Now the problem is How do I link InkToolbar(which is outside the CustomControl) to an InkCanvas(which is inside the CustomControl)?
Solution Tried:
I tried to get the InkCanvas outside the CustomControl using below code but It is not working.
Here is my code(With the solution I tried which is not working):
//In CustomControl Code Behind
InkCanvas PATH_INK_CANVAS;
protected override void OnApplyTemplate()
{
PATH_INK_CANVAS = GetTemplateChild<InkCanvas>("PATH_INK_CANVAS");
}
T GetTemplateChild<T>(string elementName) where T : DependencyObject
{
var element = GetTemplateChild(elementName) as T;
if (element == null)
throw new NullReferenceException(elementName);
return element;
}
public InkCanvas InkCanvas
{
get { return PATH_INK_CANVAS; }
}
public static readonly DependencyProperty InkCanvasProperty =
DependencyProperty.Register("InkCanvas", typeof(InkCanvas), typeof(RichInkTextBox), new PropertyMetadata(0));
//In CustomControl XAML
<Style>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Name="MainGrid" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<InkCanvas Name="PATH_INK_CANVAS" Canvas.ZIndex="-1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
//In Page
<local:CustomControl x:Name="MyCustomControl"/>
<InkToolbar Grid.Row="0" TargetInkCanvas="{x:Bind MyCustomControl.InkCanvas}"/>

I don't think that's the right syntax to define a read-only dependency property. Try something like the following instead -
public InkCanvas InkCanvas
{
get => (InkCanvas)GetValue(InkCanvasProperty);
private set => SetValue(InkCanvasProperty, value);
}
public static readonly DependencyProperty InkCanvasProperty = DependencyProperty.Register(
"InkCanvas", typeof(InkCanvas), typeof(InkCanvasWrapper), new PropertyMetadata(null));
Also, make sure you set the Mode of the x:Bind to OneWay as the default value of the InkCanvas dependency property is null (you are setting the default value to 0 which is wrong).
<InkToolbar Grid.Row="0" TargetInkCanvas="{x:Bind MyCustomControl.InkCanvas, Mode=OneWay}" />

WPF - Marking an image with pushpins

I need to show an image (fixed-size) in a WPF application.
It should be able to mark the image with pins as shown in above
image.
It should be able to add description for each pins and, when hovering
on the pin the description should be shown.
Finally I need to save all the information in SQL database to display
the pins again.
Is that possible to achieve this by creating a custom control?
Please suggest me your ideas for implementing this solution.
Providing examples will be highly appreciated.

To answer your question: Yes it's possible.
I would highly recommend the MVVM architectural pattern when working with WPF. What you need is:
A canvas control in order to use absolute positioning
An image control that will display the background image
A custom pin control that will display the image of the pins. This control could also contain a DataTemplate that will be used to generate the description control.
A custom control that will display information about the pin (Will be used in the popup)
An adorner that will render the pin info popup in an adorner layer. Place the adorner decorator in the same position as the canvas.
The information that you need to store about a pin:
Its Canvas.Top and Canvas.Left values
Properties that affect its visual characteristics (e.g. image, color etc)
The information displayed in its popup (e.g. description, image)
You can then read all the entries from the database and create a pin view model for each entry and bind the view models to an items control in the canvas. Don't forget to bind properties of the pin control to the respective values of its view model (e.g. Canvas.Left, Canvas.Top, Description etc).
As for the popup, once you created your adorner class, add an instance of it to the adorner layer of your canvas when you need to show the popup and remove it when you need to close the popup.
An example of the style of the map control can be seen below (Assumes view model of map control contains an observable collection of pins):
<Style TargetType="{x:Type local:Map}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Map}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<AdornerDecorator></AdornerDecorator>
<ItemsControl ItemsSource="{Binding Path=Items}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="White">
</Canvas>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:Pin></local:Pin>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Top" Value="{Binding Path=Y}" />
<Setter Property="Canvas.Left" Value="{Binding Path=X}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here's an example of an adorner control that simply renders a given FrameworkElement:
public class ControlAdorner : Adorner {
FrameworkElement _control;
public FrameworkElement Control {
get {
return (_control);
}
set {
_control = value;
}
}
public ControlAdorner(UIElement Element, FrameworkElement Control)
: base(Element) {
this.Control = Control;
this.AddVisualChild(this.Control);
this.IsHitTestVisible = false;
}
protected override Visual GetVisualChild(int index) {
if (index != 0) throw new ArgumentOutOfRangeException();
return _control;
}
protected override int VisualChildrenCount {
get {
return 1;
}
}
public void UpdatePosition(Point point) {
VisualOffset = new Vector(point.X, point.Y);
this.InvalidateVisual();
}
protected override Size MeasureOverride(Size constraint) {
Control.Measure(constraint);
return Control.DesiredSize;
}
protected override Size ArrangeOverride(Size finalSize) {
Control.Arrange(new Rect(new Point(VisualOffset.X, VisualOffset.Y - 20), finalSize));
return new Size(Control.ActualWidth, Control.ActualHeight);
}
}
And here's how to make the Pin control display the adorner when the mouse is hovering:
public class Pin : Control {
public DataTemplate DescriptionItemTemplate {
get { return (DataTemplate)GetValue(DescriptionItemTemplateProperty); }
set { SetValue(DescriptionItemTemplateProperty, value); }
}
public static readonly DependencyProperty DescriptionItemTemplateProperty =
DependencyProperty.Register("DescriptionItemTemplate", typeof(DataTemplate), typeof(Pin), new PropertyMetadata(null));
ControlAdorner _adorner;
AdornerLayer _adornerLayer;
static Pin() {
DefaultStyleKeyProperty.OverrideMetadata(typeof(Pin), new FrameworkPropertyMetadata(typeof(Pin)));
}
public Pin() {
this.MouseEnter += Pin_MouseEnter;
this.MouseLeave += Pin_MouseLeave;
}
private void Pin_MouseEnter(object sender, MouseEventArgs e) {
_adornerLayer = AdornerLayer.GetAdornerLayer(this);
FrameworkElement element = DescriptionItemTemplate.LoadContent() as FrameworkElement;
if (element == null) { return; }
element.DataContext = this.DataContext;
_adorner = new ControlAdorner(this, element);
_adornerLayer.Add(_adorner);
}
private void Pin_MouseLeave(object sender, MouseEventArgs e) {
_adornerLayer.Remove(_adorner);
_adorner = null;
}
}

A custom Textbox - WPF and Xaml

I want to make a custom TextBox using XAML and a custom class with an additional property to TextBox called PosType. PosType will be rendered inside the red triangle in the side.
The TextBox should be an ordinary textbox with enough margin from left to not intercept the other text.
Here is the Image showing the desired look of the textbox.
The Control class :
public class PosTextBox : TextBox
{
public string PosType { get; set; }
}
**The style I wrote : (quite similar approach to what I want except here I used border and other parts may not be accurate. **
xmlns:Pro="clr-namespace:Prox.XamlControls">
<!-- Custom TextBox -->
<Style x:Key="c1PosTextBox" TargetType="{x:Type Pro:PosTextBox}" >
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Pro:PosTextBox}">
<Grid>
<Border>
<Border>
<TextBlock Text ="{TemplateBinding Path= Pro:PosType}"></TextBlock>
<!--<TextBlock Text ="{TemplateBinding ElementName=Pro:PosTextBox, Path= Pro:PosType}"></TextBlock>-->
</Border>
</Border>
<Border Margin="5,10,5,10">
<ContentPresenter Name="Content" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" TextBlock.Foreground="White"></ContentPresenter>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How to create this custom textbox and achieve the desired look?
Edit:
Please guide me to fix the minor issues based on the same approach I mentioned above.

You could do that using Adorners
Adorners are rendered in a different layer called AdornerLayer on top of the UIElement, Which can get you the desired affect.
public class PosTypeAdorner : Adorner
{
private string _posText;
// Be sure to call the base class constructor.
public PosTypeAdorner (UIElement adornedElement, string posText) : base(adornedElement)
{
_posText = posText;
}
// A common way to implement an adorner's rendering behavior is to override the OnRender
// method, which is called by the layout system as part of a rendering pass.
protected override void OnRender(DrawingContext drawingContext)
{
// Draw the red triangle with it's text using the drawingContext here
}
}
Assuming you want the text of the PosType to be bindable, you should make it as a Dependency property.
Use OnApplyTemplate to attach the adorner to your text box
public class PosTextBox : TextBox
{
public PosTextBox()
{
}
public static readonly DependencyProperty PosTypeProperty =
DependencyProperty.Register("PosType", typeof (string), typeof (PosTextBox), new PropertyMetadata(default(string)));
public string PosType
{
get { return (string)GetValue(PosTypeProperty); }
set { SetValue(PosTypeProperty, value); }
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
var layer = AdornerLayer.GetAdornerLayer(this);
var posAdorner = new PosTypeAdorner(this, PosType);
layer.Add(posAdorner);
}
}
For more information, you can check out this links:
http://www.codeproject.com/Articles/54472/Defining-WPF-Adorners-in-XAML
http://www.nbdtech.com/Blog/archive/2010/06/21/wpf-adorners-part-1-ndash-what-are-adorners.aspx
http://www.nbdtech.com/Blog/archive/2010/06/28/wpf-adorners-part-2-ndash-placing-any-control-on-the.aspx
Good luck

Control as dependencyproperty / WPF

I have my custom control derived from Control class. I want to create dependency property of another control (for example, button) and place it in ControlTemplate (so button can be placed in xaml and MyControl's users can subscribe to it's events etc.). May someone tell me, how can I do it?
Here is result code example:
public class MyControl: Control
{
static MyControl( )
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(MyControl), new FrameworkPropertyMetadata(typeof(MyControl)));
}
public static readonly DependencyProperty MyButtonProperty =
DependencyProperty.Register("MyButton",
typeof(Button),
typeof(MyControl),
new PropertyMetadata(default(Button)));
public Button MyButton
{
get
{
return (Button) GetValue(MyButtonProperty);
}
set
{
SetValue(MyButtonProperty, value);
}
}
}
xaml:
<ControlTemplate TargetType="{x:Type lib:MyControl}">
<Canvas>
<Border Child="{TemplateBinding MyButton}">
</Border>
</Canvas>
</ControlTemplate>

Your control's template can declare a dependency on child controls via the TemplatePartAttribute. You then get an instance of that dependency in your OnApplyTemplate method.
[TemplatePart(Name = PartButton, Type = typeof(ButtonBase))]
public class MyControl : Control
{
private const string PartButton = "PART_Button";
private ButtonBase buttonPart;
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
this.buttonPart = GetTemplateChild(PartButton) as ButtonBase;
}
}
Your control template would then look something like:
<Style TargetType="MyControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MyControl">
<Border ...>
<Button x:Name="PART_Button" .../>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style
Note that this.buttonPart could be null if the template did not include an appropriately named ButtonBase within it. You should strive to ensure your control still works when template parts are missing.