Question

我是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; }
        }

    }
}

Answer 1

您需要在UserControl的代码后面创建一个依赖属性（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：我建议使用Angle的Double值，而不是Int。

祝你好运：）

Answer 2

您需要使用要在xaml中绑定的对象设置usercontrol的datacontext。为了帮助您更好地理解它是如何工作的，我使用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));
    }
}

接下来，在您的用户控件中，以这种方式设置根网格的datacontext：

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

现在，您可以在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 step by step (Basics to Advance Level)

如何绑定要在xaml中使用的值

2 个答案: