WPF：如何对齐两个不同大小的标签

Question

I have simple Grid with 2 label, one of them get its value (0-100) from Slider Value and i want this 2 labels show me the Slider Value in this format:

x Value - the value need to be in different size and much bigger then the 'x' char, So this is my start position:

And while the Value changed things become ugly:

My code:

<Grid Margin="857,112,87,383" >
    <Label Content="{Binding ElementName=knobSlider, Path=Value, UpdateSourceTrigger=PropertyChanged}"
           Foreground="#FFB2B2B2" VerticalAlignment="Center"  HorizontalAlignment="Center"
       FontFamily="Buxton Sketch"  FontSize="40" Grid.Column="1" Padding="0,0,0,0"/>
    <Label Content="x" FontSize="20" VerticalAlignment="Center" HorizontalAlignment="Left" Grid.Column="1" Foreground="#FFB2B2B2" Padding="0,20,0,0"/>
</Grid>

Any idea how to fix it ?

BTW: i want my value will show with only 1 decimal number after the point.

Answer 1

You can add a string format to the Label that should give you all the control over the number you need.

For example:

<Label Content="{Binding ElementName=knobSlider, Path=Value, UpdateSourceTrigger=PropertyChanged}" ContentStringFormat="N1" />

An alternative is to add the string format directly to the binding. That works too. Just like that:

<Label Content="{Binding ElementName=knobSlider, Path=Value, UpdateSourceTrigger=PropertyChanged, StringFormat=N2}" />

For your second problem the design of your grid is the problem. Grid allows you to create columns and rows. Make use of it! Like so:

    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
      </Grid.ColumnDefinitions>
      <Label Grid.Column="0" Content="x" Padding="0,20,0,0" />
      <Label Grid.Column="1" Content="{Binding ElementName=knobSlider, Path=Value, UpdateSourceTrigger=PropertyChanged}" />
    </Grid> 

Now both labels are in their own column and can't overlap.