如何使绑定成为要在 XAML 中使用的值

本文关键字：XAML 绑定 何使 | 更新日期: 2023-09-27 18:35:10

我是Xaml的新手（我在其中工作的第一个项目），并希望得到一些帮助。我正在尝试制作一个径向量规以保存在.dll中以用于其他项目，但在试图传递指针的角度值时遇到了困难。最后，我希望能够调用仪表，给出一个像方法调用一样的角度。

前任：
<RadialGauge Angle="50" HorizontalAlignment="Left" Margin="532,278,0,0" VerticalAlignment="Top" />

不过，我在发送要由我的仪表使用的值时遇到问题，任何帮助将不胜感激。

我的 .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>

我的.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; }
        }
    }
}

如何使绑定成为要在 XAML 中使用的值

您需要在

用户控件的代码隐藏上创建依赖项属性 （MSDN）。

依赖项属性具有支持 WPF 中的数据绑定所需的所有功能。

您可以修改隐藏的代码以包含以下内容，而不是 Angle 属性：

// 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); }
}

并且需要将 XAML 更新为：

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

绑定到此属性。

Visual Studio 中有一个方便的代码片段可以帮助创建此代码。只需键入"propdp"并按两次 Tab。

若要了解有关依赖项属性以及绑定在 WPF 中的工作方式的详细信息，请查看此网站：http://wpftutorial.net/DependencyProperties.html

PS：我建议为角度使用双精度值，而不是 Int。

祝你好运:)

需要使用要在 xaml 中绑定的对象设置用户控件的数据上下文。为了帮助您更好地理解它是如何工作的，我向您推荐这个设计，应用 MVVM 模式：

声明一个类，如下所示：

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));
    }
}

接下来，在用户控件中，按以下方式设置根网格的数据上下文：

<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>

现在，您可以在网格内声明的控件中使用 viemodel 属性：

 <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>

如果您想详细了解此模式的工作原理，我建议您阅读本文：WPF MVVM 逐步（从基础知识到高级级别）

相关文章：