Question

I’m creating a standalone WPF app with multi-language support. I’ve found some great resources (mostly on SO) on how to store and access the strings as needed. This part is pretty straightforward and doable, but I’m fuzzy on how to take care of screen layout issues.

I’m using some custom images to skin up my app for buttons, etc. For instance, here’s a button with some text within:

   <Button
        Canvas.Left="33"
        Canvas.Top="484"
        Style="{StaticResource SmallButtonBase}">
        <TextBlock                 
            FontSize="20" 
            FontWeight="Bold"        
            TextAlignment="Center" FontFamily="Helvetica">                                
            Enter
        </TextBlock>
    </Button>

Now here is the same button with text from another language:

   <Button
        Canvas.Left="33"
        Canvas.Top="484"
        Style="{StaticResource SmallButtonBase}">
        <TextBlock                 
            FontSize="20" 
            FontWeight="Bold"        
            TextAlignment="Center" FontFamily="Helvetica">                                
            Enterenschtein
        </TextBlock>
    </Button>

So my question is: What is a good method to prevent this “overflow” situation. I’d like to have XAML take care of any font resizing or indenting that is needed automatically so that I don’t have to tweak the UI for each language I’m supporting.

Any insight is appreciated!

p.s. Here’s the XAML for SmallButtonBase. It basically defines what happens when the button has focus or is pressed. A different image is used for each case.

<Style x:Key="SmallButtonBase" TargetType="Button">
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="Container">
                    <Image x:Name="Img" Source="/Resources/Elements/Buttons/10.png" Margin="6" />
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsKeyboardFocused" Value="True">
                        <Setter TargetName="Img" Property="Source" Value="/Resources/Elements/Buttons/11.png" />
                        <Setter TargetName="Img" Property="Margin" Value="0" />
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsKeyboardFocused" Value="True" />
                            <Condition Property="IsPressed" Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Img" Property="Source" Value="/Resources/Elements/Buttons/12.png" />
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

Try putting a viewbox around your contentpresenter with a fixed width and height that matches your image for the button

like this

<Viewbox Width="85" Height="85">
    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Viewbox>

I think then you can allow WPF to scale the font to fit in that location.