CODEWITHSUNDEEP
silverlightxamldynamicresize
Steve Crane
Steve Crane

Reputation: 4440

How best to resize XAML with dynamic text

In a Silverlight interface I'm working on I have the need to resize a stack panel when its container resizes, to prevent the text in it from being truncated. The text in question is added at runtime from language files, depending on the language the user has selected. As the lengths of strings can vary considerably between languages I'm a bit stumped on how best to approach this. This is what it looks like.

alt text

The stack panel in question is the coloured block and the labels Driving, Active Work, Availability and Break are the strings whose length can change. The XAML currently looks like this.

<StackPanel x:Name="StatusTotals" Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,5,0,5">
  <Border x:Name="DrivingBorder" Background="#80FF0000" BorderBrush="Black" BorderThickness="1" Opacity="1" CornerRadius="5,0,0,5" Margin="0,0,-1,0">
    <StackPanel Orientation="Vertical" Margin="5,1" VerticalAlignment="Center">
      <TextBlock Text="Driving" Tag="dttlDriving" HorizontalAlignment="Center"/>
      <TextBlock x:Name="DrivingDuration" Text="00:00" HorizontalAlignment="Center"/>
    </StackPanel>
  </Border>
  <Border x:Name="ActiveWorkBorder" Background="#8000FFFF" BorderBrush="Black" BorderThickness="1" Opacity="1" Margin="0,0,-1,0">
    <StackPanel Orientation="Vertical" Margin="5,1" VerticalAlignment="Center">
      <TextBlock Text="ActiveWork" Tag="dttlActiveWork" HorizontalAlignment="Center"/>
      <TextBlock x:Name="ActiveWorkDuration" Text="00:00" HorizontalAlignment="Center"/>
    </StackPanel>
  </Border>
  <Border x:Name="AvailabilityBorder" Background="#80FFFF00" BorderBrush="Black" BorderThickness="1" Opacity="1" Margin="0,0,-1,0">
    <StackPanel Orientation="Vertical" Margin="5,1" VerticalAlignment="Center">
      <TextBlock Text="Availability" Tag="dttlAvailability" HorizontalAlignment="Center"/>
      <TextBlock x:Name="AvailabilityDuration" Text="00:00" HorizontalAlignment="Center"/>
    </StackPanel>
  </Border>
  <Border x:Name="BreakBorder" Background="#8000FF00" BorderBrush="Black" BorderThickness="1" Opacity="1" CornerRadius="0,5,5,0">
    <StackPanel Orientation="Vertical" Margin="5,1" VerticalAlignment="Center">
      <TextBlock Text="Break" Tag="dttlBreak" HorizontalAlignment="Center"/>
      <TextBlock x:Name="BreakDuration" Text="00:00" HorizontalAlignment="Center"/>
    </StackPanel>
  </Border>
</StackPanel>

I would like to be able to reduce the size of this panel if it's wider than the ruler drawn above it, which is already dynamically resizing as I want, but would like the values beneath the labels to stay at the size they are for the sake of readability.

What would be the best way to approach this? I've considered setting the FontSize properties of the labels or using a ScaleTransform but I'm unsure which of these is the best way to go. Is there a way to derive the width that the panel will adopt without actually changing the font sizes and then testing ActualWidth? If I could do this it would make this task easier.

Upvotes: 1

Views: 1242

Answers (1)

Graeme Bradbury
Graeme Bradbury

Reputation: 3721

I'm not sure if I understand your question completely.

Is it a case of your top parent stackpanel has been given a limit of x wide, but it's children are asking for a total width that is greater than this due to length of the labels?

In which case have a look at wrapping the labels in ViewBox controls (You'll find it in the Silverlight Toolbox library) This control will scale it's contents to take up the size available.

Upvotes: 3

Related Questions