CODEWITHSUNDEEP
c#wpfuser-interfaceuser-controlsgrid
Spen D
Spen D

Reputation: 4345

User control Grid column width in the View/Window

Am having a Address user control, am using this control in all the data entry forms

Two columns

  1. labels
  2. text box contorls

i want to adjust the 1 column based on the view its used

User control

for example

this is one of the view where the user control is used

Red marked is the View Grid column

Yellow marked is the User control grid column

is there any way to set the yellow marked to be equal to red marked column width ??

Or is it possible to create a Dependency property and bind the width to the column, or any other smart way to resolve this issue??

View where user control is used

XAML

 <Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>           
    </Grid.RowDefinitions>

    <TextBlock Grid.Row="0" Grid.Column="0" Text="Full Name" Style="{StaticResource FormTextBlockStyle}" />
    <TextBox Grid.Row="0" Grid.Column="1" Width="200" Text="" Style="{StaticResource FormTextBoxStyle}" IsEnabled="False" IsReadOnly="True" />

    <TextBlock Grid.Row="1" Grid.Column="0" Text="Gender" Style="{StaticResource FormTextBlockStyle}" />
    <StackPanel Grid.Row="1" Grid.Column="1" Orientation="Horizontal">
        <RadioButton x:Name="RadioGendeMale" Content="Male" />
        <RadioButton Content="Female" Margin="8,0,0,0" />
    </StackPanel>

    <TextBlock Grid.Row="2" Grid.Column="0" Text="Date of Birth" Style="{StaticResource FormTextBlockStyle}" />
    <TextBox Grid.Row="2" Grid.Column="1" Width="200" Text="" Style="{StaticResource FormTextBoxStyle}" />

    <Controls:AddressControl x:Name="grdAdddress" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"  HorizontalAlignment="Stretch" VerticalAlignment="Top"/>

</Grid>

Upvotes: 2

Views: 771

Answers (2)

Sasa
Sasa

Reputation: 32

Trying to make a dependency property in control and bind it isn't going to work as adabyron said. His solution seems ok.

Upvotes: 1

Mike Fuchs
Mike Fuchs

Reputation: 12319

The main trouble here is that ColumnDefinition.ActualWidth is not a DependencyProperty and will not update if you bind to it.

I assume you do not only want to set yellow to red, but synchronize to the larger width. If your situation is reasonably static (no changes to first column width after initial display), you can work with this:

In UserControl:

<Grid.ColumnDefinitions>
    <ColumnDefinition x:Name="Col1" Width="Auto"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

Code behind of UserControl:

public AddressControl()
{
    InitializeComponent();
    this.Loaded += AddressControl_Loaded;
}

void AddressControl_Loaded(object sender, RoutedEventArgs e)
{
    var parentGrid = this.Parent as Grid;
    if (parentGrid != null)
    {
        var width = Math.Max(this.Col1.ActualWidth, parentGrid.ColumnDefinitions[0].ActualWidth);

        this.Col1.Width = new GridLength(width);
        parentGrid.ColumnDefinitions[0].Width = new GridLength(width);
    }
}

For more dynamic situations, you'd have to handle SizeChanged events.

Upvotes: 2

Related Questions