how to make a bind a value to be used in xaml

Question

I'm new to Xaml(first project im working on in it), and would love some help. I'm trying to make a radial gauge to be saved in a .dll to be used in other projects but have hit a wall trying to pass a angle value for the needle. In the end i want to be able to call for the gauge giving an angle like a method call.

ex:
<RadialGauge Angle="50" HorizontalAlignment="Left" Margin="532,278,0,0" VerticalAlignment="Top" />

im having trouble sending a value to be used by my gauge though, any help would be appreciated.

My .xaml

<UserControl
x:Class="DTIGauge.RadialGauge"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DTIGauge"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Height="450" Width="450"

>

<Grid>
    <Ellipse Fill="White" Margin="30"/>

    <Grid >

        <Polygon Height="450" Width="450" Stroke="Red" StrokeThickness="2" Fill="Red" Points="225,37 220,228 225,240 230,228">
            <Polygon.RenderTransform>
                <RotateTransform CenterX="225" CenterY="225" Angle="{Binding Path=the_angle}"/>
            </Polygon.RenderTransform>
        </Polygon>
    </Grid>
    <TextBlock Text="0°" TextAlignment="Center" FontSize="15" Foreground="White" Height="450" Width="450" VerticalAlignment="Top" HorizontalAlignment="Left">
        <TextBlock.RenderTransform>
            <RotateTransform  CenterX="225" CenterY="225" Angle="0"/>
        </TextBlock.RenderTransform>
    </TextBlock>
    <TextBlock Text="20°" TextAlignment="Center" FontSize="15" Foreground="White" Height="450" Width="450" VerticalAlignment="Top" HorizontalAlignment="Left">
        <TextBlock.RenderTransform>
            <RotateTransform  CenterX="225" CenterY="225" Angle="20"/>
        </TextBlock.RenderTransform>
    </TextBlock>

    <!--...And a lot more markers-->
</Grid>

my .cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236

namespace DTIGauge
{
    public sealed partial class RadialGauge
    {

        Int32 temp;
        public RadialGauge(Int32 myInt)
        {
            this.InitializeComponent();
            temp = myInt;

        }
        Int32 _myint;
        public Int32 the_angle
        {
            get { return this._myint; }
            set { this._myint = temp; }
        }

    }
}

Answer 1

You need to create a Dependency Property (MSDN) on your UserControl's code behind.

A dependency property has all the necessary functionality to support data binding in WPF.

You could modify your code behind to include this instead of your Angle property:

// Dependency Property
public static readonly DependencyProperty AngleProperty = 
     DependencyProperty.Register( "Angle", typeof(int),
     typeof(RadialGauge), new FrameworkPropertyMetadata(0));

// .NET Property wrapper
public int Angle
{
    get { return (int)GetValue(AngleProperty); }
    set { SetValue(AngleProperty, value); }
}

And your XAML would need to be updated to:

<RotateTransform CenterX="225" CenterY="225" Angle="{Binding Path=Angle, ElementName=userControl}"/>

To bind to this property.

There's a handy code snippet in Visual Studio that helps create this code. Just type "propdp" and hit Tab twice.

To learn more about dependency properties and how binding works in WPF, check out this website: http://wpftutorial.net/DependencyProperties.html

PS: I would recommend a Double value for Angle, instead of Int.

Good luck :)

Answer 2

You need to set the datacontext of your usercontrol with the object that you want to bind in your xaml. To help you understand better How it works, I proporse you this design, applying MVVM pattern:

Declare a class as I show below:

public class RadialGougeViewModel : INotifyPropertyChanged
{
    private int _angle;

    public int Angle
    {
        get
        {
            return _angle;
        }
        set
        {
            _angle = value;
            OnPropertyChanged("Angle");
        }
    }


    public event PropertyChangedEventHandler PropertyChanged;

    [NotifyPropertyChangedInvocator]
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChangedEventHandler handler = PropertyChanged;

        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }
}

Next, in your user control,set the datacontext of your root grid at this way:

<UserControl x:Class="WpfApplication1.Gouge"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
    <YourNamespace:RadialGougeViewModel  x:Key="RadialGougeViewModel "/>
</UserControl.Resources>
<Grid DataContext="{StaticResource RadialGougeViewModel}">
</Grid>

Now you can use the viemodel properties in the controls declared inside the Grid:

 <Polygon Height="450" Width="450" Stroke="Red" StrokeThickness="2" Fill="Red" Points="225,37 220,228 225,240 230,228">
        <Polygon.RenderTransform>
            <RotateTransform CenterX="225" CenterY="225" Angle="{Binding Path=Angle}"/>
        </Polygon.RenderTransform>
</Polygon>

If you want understand in details how work this pattern I recommend you read this article:WPF MVVM step by step (Basics to Advance Level)