WPF 从页面绑定到 UserControl

Question

我有一个 UWP 应用程序，它有一个页面包含一些绑定到 ABC[2].D、ABC[2].E、ABC[2].F 等的文本框控件现在我想移动文本框到一个单独的 UserControl 以简化我页面的 XAML 但仍希望它们绑定到 ABC[2].D、ABC[2].E 等。我该如何实现？

谢谢

这是我的用户控件

<UserControl
    x:Class="Inspecto.HWStatusDisplayControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Truphase360"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="250">

    <Grid>
        <Grid.Resources>
            <Style x:Key="styleTxtBox" TargetType="TextBox">
                <Setter Property="IsReadOnly" Value="True" />
                <Setter Property="Width" Value="75"/>
            </Style>
            <Style x:Key="styleTxtBlk" TargetType="TextBlock">
                <Setter Property="FontSize" Value="12" />
                <Setter Property="Margin" Value="10"/>
                <Setter Property="Width" Value="75" />
            </Style>
        </Grid.Resources>
        <StackPanel Orientation="Vertical"  Margin="20">
            <TextBlock Text="{x:Bind Header}" FontSize="16" FontWeight="Bold" Margin="10">
            </TextBlock>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Temp1" Style="{StaticResource styleTxtBlk}" />
                <TextBox  Style="{StaticResource styleTxtBox}" Text="{Binding Mode=OneWay, Path=Temperature1 }" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Temp2" Style="{StaticResource styleTxtBlk}" />
                <TextBox  Style="{StaticResource styleTxtBox}" Text="{Binding Mode=OneWay, Path=Temperature2 }" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="SW Version" Style="{StaticResource styleTxtBlk}" />
                <TextBox Style="{StaticResource styleTxtBox}" Text="{Binding Mode=OneWay, Path=SWVersionStr }" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="HW Version" Style="{StaticResource styleTxtBlk}" />
                <TextBox Style="{StaticResource styleTxtBox}" Text="{Binding Mode=OneWay, Path=HWVersionStr }" />
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>

正下方的代码块存在于一个页面内部，并被重复多次。 TextBoxs 被绑定到页面内的 {x:Bind ViewModel.DeviceData.Status.Devices[0].Temperature1 } 等等现在我想从 UserControl 显示相同的内容。

在数据 object 中，Devices[] 的实例每隔几秒就会被替换一次。 新数组是通过从 JSON object 反序列化创建的，并直接分配给 ViewModel.DeviceData.Status.Devices = FromJSON(string);

谢谢

Answer 1

我同意@EldHasp。 您的方案的解决方案是您可能需要在 UserControl 中创建自定义依赖项属性。 然后通过绑定将ABC object 传递给 UserControl 的这个属性。

我对此做了一个简单的演示，您可以查看代码并根据您的场景进行调整。

用户控制 XAML

 <Grid x:Name="MyGrid">
    <Grid.Resources>
        <Style x:Key="styleTxtBox" TargetType="TextBox">
            <Setter Property="IsReadOnly" Value="True" />
            <Setter Property="Width" Value="75"/>
        </Style>
        <Style x:Key="styleTxtBlk" TargetType="TextBlock">
            <Setter Property="FontSize" Value="12" />
            <Setter Property="Margin" Value="10"/>
            <Setter Property="Width" Value="75" />
        </Style>
    </Grid.Resources>
    <StackPanel Orientation="Vertical"  Margin="20">
        <TextBlock Text="{x:Bind Header}" FontSize="16" FontWeight="Bold" Margin="10">
        </TextBlock>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="Temp1" Style="{StaticResource styleTxtBlk}" />
            <TextBox  Style="{StaticResource styleTxtBox}" Text="{Binding MyDependencyProperty._List[0].Name}" />
        </StackPanel>
    </StackPanel>
</Grid>

用户控制代码

 public AClass MyDependencyProperty
    {
        get { return (AClass)GetValue(MyDependencyPropertyProperty); }
        set { SetValue(MyDependencyPropertyProperty, value); }
    }

    // Using a DependencyProperty as the backing store for MyDependencyProperty.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty MyDependencyPropertyProperty =
        DependencyProperty.Register("MyDependencyProperty", typeof(AClass), typeof(TestUserControl), new PropertyMetadata(null));

    public string Header = "TestHeader";

    public TestUserControl()
    {
        this.InitializeComponent();

        this.DataContext = this;
    }

主页 Xaml

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" Foreground="Red" Text="{x:Bind ViewModel._AClass._List[1].Name}"/>
    
    <local:TestUserControl Grid.Row="1" MyDependencyProperty="{x:Bind ViewModel._AClass}"/>
</Grid>

主页代码

 public sealed partial class MainPage : Page
{
    public TestViewModel ViewModel { get; set; }

    public MainPage()
    {
        this.InitializeComponent();
        ViewModel= new TestViewModel();
    }
}

public class TestViewModel 
{
    public AClass _AClass { get; set; }

    public TestViewModel()
    {
        _AClass = new AClass();
    }
}

public class AClass
{
    public List<BClass> _List { get; set; }

    public AClass()
    {
        _List = new List<BClass>();
        _List.Add(new BClass { Name = "123" });
        _List.Add(new BClass { Name = "234" });
    }
}

public class BClass
{
     public string Name { get; set; }
}

结果：