What's the best way to deal with multi-language layout issues in WPF / XAML?

I am creating a multi-language standalone WPF application. I found some helpful resources (mostly on SO) on how to store and access strings as needed. This part is pretty simple and doable, but I don't understand how to take care of the screens.

I am using some custom skin images for my button app, etc. For example, here's a button with some text inside:

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

      

alt text

Now here's the same button with text from a different language:

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

      

alt text

So my question is, what is a good method to prevent this "overflow" situation. I would like XAML to take care of any font size or indentation that is automatically required so that I don't have to customize the UI for every language I support.

Any insight is appreciated!

ps 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>

      

+2


a source to share


1 answer


Try placing a fixed width and height box around your contentpresenter to match your image for the button

like this



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

      

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

+2


a source







All Articles