Positioning UIElement in Custom Control

Question

I am developing a Custom Control, where there is a TextBox and a Button placed inside the Grid.

The thing is when I set a Custom Property for the UserControl Say - Left : the Button should be displayed before the TextBox, and for Right the Button should be displayed on the right side of the text box.

Since, I am defining both the elements in a Grid - am not able to position as per my requirements.

Answer 1

If you have to use a Grid, You can make your Grid have 3 columns and switch the TextBox Grid.Column based on your custom property.

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
  </Grid.ColumnDefinitions>
  <Button Grid.Column="1"
          Content="Some Text" />
  <TextBox Text="Test">
    <TextBox.Style>
      <Style TargetType="{x:Type TextBox}">
        <Setter Property="Grid.Column"
                Value="0" />
        <Style.Triggers>
          <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor,
                                                                        AncestorType={x:Type UserControl}},
                                          Path=Left}"
                        Value="True">
            <Setter Property="Grid.Column"
                    Value="2" />
          </DataTrigger>
        </Style.Triggers>
      </Style>
    </TextBox.Style>
  </TextBox>
</Grid>

you can switch the {x:Type UserControl} in the DataTrigger to your {x:Type CustomUserControl}