UserControl для строки в сетке

Question

У меня есть следующая сетка:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <!-- GridRow-Definition -->

    <Label Grid.Row="0" Grid.Column="0">FirstRow:</Label>
    <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Binding_To_First_Row}" />

    <Label Grid.Row="1" Grid.Column="0">SecondRow:</Label>
    <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Binding_To_Second_Row}" />

    <!-- many more Label-TextBox-Rows -->
</Grid>

Вопрос: Есть ли способ создать элемент управления UserControl, который содержит метки и TextBox и правильно выравнивает первый столбец надлежащим образом?

Answer 1

Ответ - да, это возможно, но, возможно, вам следует использовать DataGrid или ItemsControl с DataTemplate.

Простой ответ на ваш вопрос: если вам нужны столбцы сетки в разных сетках для синхронизации их ширины, вы используете атрибут SharedSizeGroup , например:

<UserControl>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="column1" Width="auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
    </Grid>
</UserControl>

Затем в родительском элементе вы используете Grid.IsSharedSizeScope = "True"

<StackPanel Grid.IsSharedSizeScope="True">
    <local:UserControl1/>
    <local:UserControl1/>
</StackPanel>

Это синхронизирует любые столбцы (или строки), имеющие одинаковую SharedSizeGroup в этой области (у вас может быть несколько вложенных областей).

Answer 2

Это было бы очень сложно, потому что все в usercontrol визуализируется только этим usercontrol.Grid, которому принадлежит usercontrol, ничего не знает о содержимом usercontrol, и я думаю, что так и должно быть.Однако вы можете создать пользовательский элемент управления с Prefix-, Text- и PrefixWidth-DependencyProperty.

Пример:

public class PrefixRow: Control
{
  static PrefixRow( )
  {
    DefaultStyleKeyProperty.OverrideMetadata( typeof( PrefixRow ) , new FrameworkPropertyMetadata( typeof( PrefixRow ) ) );
  }

  public string Text
  {
    get { return ( string )GetValue( TextProperty ); }
    set { SetValue( TextProperty , value ); }
  }
  public static readonly DependencyProperty TextProperty =
    DependencyProperty.Register( "Text" , typeof( string ) , typeof( PrefixRow ) , null );

  public double PrefixWidth
  {
    get { return ( double )GetValue( PrefixWidthProperty ); }
    set { SetValue( PrefixWidthProperty , value ); }
  }
  public static readonly DependencyProperty PrefixWidthProperty =
    DependencyProperty.Register( "PrefixWidth" , typeof( double ) , typeof( PrefixRow ) , null );

  public string Prefix
  {
    get { return ( string )GetValue( PrefixProperty ); }
    set { SetValue( PrefixProperty , value ); }
  }
  public static readonly DependencyProperty PrefixProperty = 
    DependencyProperty.Register( "Prefix" , typeof( string ) , typeof( PrefixRow ) , null );

}

В окне:

<Window x:Class="WPFApp.GridWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridWindow" Height="300" Width="300" xmlns:local="clr-namespace:WPFApp"
        >
<Window.Resources>
  <Style TargetType="{x:Type local:PrefixRow}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type local:PrefixRow}">
        <Border Background="{TemplateBinding Background}"
                          BorderBrush="{TemplateBinding BorderBrush}"
                          BorderThickness="{TemplateBinding BorderThickness}">
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto"/>
              <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="{TemplateBinding Prefix}" Grid.Column="0" Width="{TemplateBinding PrefixWidth}"
                              VerticalAlignment="Center"/>
            <TextBox Text="{TemplateBinding Text}" Grid.Column="1"/>
          </Grid>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
</Window.Resources>
<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>
  <local:PrefixRow  PrefixWidth="{Binding ElementName=ColumnSlider, Path=Value}" Prefix="Row1" VerticalAlignment="Top" Text="test" Grid.Row="0"/>
  <local:PrefixRow  PrefixWidth="{Binding ElementName=ColumnSlider, Path=Value}" Prefix="Row1" VerticalAlignment="Top" Text="test" Grid.Row="1"/>
  <local:PrefixRow  PrefixWidth="{Binding ElementName=ColumnSlider, Path=Value}" Prefix="Row1" VerticalAlignment="Top" Text="test" Grid.Row="2"/>
  <local:PrefixRow  PrefixWidth="{Binding ElementName=ColumnSlider, Path=Value}" Prefix="Row1" VerticalAlignment="Top" Text="test" Grid.Row="3"/>
  <Slider x:Name="ColumnSlider" Minimum="10" Maximum="300" Value="50" Grid.Row="4"/>
</Grid>