如何防止重複這段代碼10次？

Question

我在我的XAML中使用了10個如下所示的網格，每次都使用其他綁定源。 我必須重複（複製/粘貼）這段代碼10次還是有更好的方法？ （模板？）

<Grid>        
    <Grid.ColumnDefinitions> 
     <ColumnDefinition /> 
     <ColumnDefinition /> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition /> 
    </Grid.RowDefinitions> 
    <TextBox 
      Style="{StaticResource TBGrid}" 
      Grid.Column="0" 
      Grid.Row="0" 
      Text="{Binding ...}" /> 
    <Label 
      Style="{StaticResource TBLabel}" 
      Grid.Column="1" 
      Grid.Row="0" 
      Content="{Binding....}" /> 
</Grid> 

現在我有這樣的代碼，從評論者的幫助下，它似乎工作：

using System.Windows; 
using System.Windows.Controls; 

namespace MVVMCable 
{ 
    /// <summary> 
    /// Interaction logic for ArrowLabel.xaml 
    /// </summary> 
    public partial class ArrowLabel : UserControl 
    { 
     public ArrowLabel() 
     { 
      InitializeComponent(); 
      this.DataContext = this; // <==== this must be added, seemingly. 
     } 
     public static readonly DependencyProperty TextBoxTextProperty = DependencyProperty.Register 
      (
       "TextBoxText", 
       typeof(string), 
       typeof(ArrowLabel), 
       new PropertyMetadata("") 
      ); 

     public string TextBoxText 
     { 
      get { return this.GetValue(TextBoxTextProperty) as string; } 
      set { this.SetValue(TextBoxTextProperty, value); } 
     } 

     public static readonly DependencyProperty LabelTextProperty = DependencyProperty.Register 
      (
       "LabelText", 
       typeof(string), 
       typeof(ArrowLabel), 
       new PropertyMetadata("") 
      ); 

     public string LabelText 
     { 
      get { return this.GetValue(LabelTextProperty) as string; } 
      set { this.SetValue(LabelTextProperty, value); } 
     } 
    } 
} 

XAML：

<UserControl 
    x:Class="MVVMCable.ArrowLabel" 
    x:Name="MyArrowLabel" 
    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="137.8" 
    d:DesignWidth="279.2"> 
    <Grid 
     Width="70" 
     Height="15"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition 
       Width="40"/> 
      <ColumnDefinition 
       Width="30"/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition 
       Height="14" /> 
     </Grid.RowDefinitions> 
     <TextBox 
      Height="20" 
      Grid.Column="0" 
      Grid.Row="0" 
      IsEnabled="False" 
      HorizontalContentAlignment="Right" 
      Width="30" 
      Text="{Binding ElementName=MyArrowLabel, Path=TextBoxText}"/> 
     <Label 
      Height="auto" 
      Grid.Column="1" 
      Grid.Row="0" 
      HorizontalContentAlignment="Left" 
      Width="auto" 
      Content="{Binding ElementName=MyArrowLabel, Path=LabelText}"/> 

    </Grid> 
</UserControl> 

我用它在我的這樣的應用程序：

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:c="clr-namespace:MVVMCable" 
    xmlns:oxy="http://oxyplot.org/wpf" 
    xmlns:shapes="clr-namespace:MVVMCable.Views" 
    xmlns:core="clr-namespace:System;assembly=mscorlib" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    x:Class="MVVMCable.MainWindow" 
    ....... 
    <c:ArrowLabel 
     Canvas.Left="10" 
     Canvas.Top="6" 
     TextBoxText="{Binding Cable.RHVc}" <== error here and 
     LabelText="{Binding Units[X].Display}" /> <== here 

錯誤文本是：

錯誤2成員「LabelText」未被識別或無法訪問。

並添加this.DataContext = this後，事情似乎工作。

Answer 1

如果綁定可能會被標籤化爲大多數情況，並且您只能切換上下文，那麼您應該創建一個UserControl，將您的內容放在那裏。並且在需要的地方使用它而不是重複代碼，只需更改它們綁定的DataContext即可。

Answer 2

您可以通過依賴項屬性創建自定義字段控件。在此字段控件中，您可以將標籤和文本框功能組合在一起。然後你可以把控制放在堆疊面板上。所以，它會刪除多餘的代碼。

Answer 3

因爲每個都會有不同的DataContext，所以我會推薦自定義UserControl。

例如：

的UserControl本身將有反覆XAML

<UserControl 
    x:Class="SpecialUserControl" 
    x:Name="MyUserControl" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 
    <Grid>        
     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition /> 
     </Grid.RowDefinitions> 
     <TextBox 
       Style="{StaticResource TBGrid}" 
       Grid.Column="0" 
       Grid.Row="0" 
       Text="{Binding ElementName=MyUserControl, Path=TextBoxText}" /> 
     <Label 
       Style="{StaticResource TBLabel}" 
       Grid.Column="1" 
       Grid.Row="0" 
       Content="{Binding ElementName=MyUserControl, Path=LabelText}" /> 
    </Grid> 
</UserControl> 

守則UserControl的背後將有兩個DependencyProperties

public static readonly DependencyProperty TextBoxTextProperty = 
    DependencyProperty.Register 
    (
     "TextBoxText", 
     typeof(string), 
     typeof(SpecialUserControl), 
     new PropertyMetadata("") 
    ); 

public string TextBoxText 
{ 
    get { return this.GetValue(TextBoxTextProperty) as string; } 
    set { this.SetValue(TextBoxTextProperty, value); } 
} 

public static readonly DependencyProperty LabelTextProperty = 
    DependencyProperty.Register 
    (
     "LabelText", 
     typeof(string), 
     typeof(SpecialUserControl), 
     new PropertyMetadata("") 
    ); 

public string LabelText 
{ 
    get { return this.GetValue(LabelTextProperty) as string; } 
    set { this.SetValue(LabelTextProperty, value); } 
} 

如果你注意到，在UserControl XAML實際上綁定到這些DependencyProperties的TextBox和Label控件。

現在的使用情況，所有你需要做的就是使用定義的DependencyProperties綁定到任何你會喜歡：

<namespace:SpecialUserControl 
    TextBoxText="{Binding ThisIsABinding}" 
    LabelText="{Binding ThisIsAnotherBinding}"/>