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

結果：