Question

I create a custom button in my application as following

<Button x:Class="MyApp.ButtonMainMenuSubCat"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="100" d:DesignWidth="536">
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Grid>
                <Grid Name="gridParent">
                    <Image Name="imgTransparent" Source="/MyApp;component/Resources/LeftCategoryTransparent.png" Stretch="Fill" Margin="0,0,0,0"  />
                    <Image Name="Part_Pressed" Source="/MyApp;component/Resources/PressedMainScreenSubMenu.png" Stretch="Fill" Margin="0,0,0,4"  Visibility="Hidden"/>
                    <Image Name="Focused" Source="/MyApp;component/Resources/MainSubMenuFocus.png" Margin="-3,0,-3,3"   Stretch="Fill" Visibility="Hidden" />
                    <Image Name="Seperator" Source="/MyApp;component/Resources/MainSubMenuSeperator.png" Margin="5,0,5,-1"   Stretch="Uniform" VerticalAlignment="Bottom"/>

                    <TextBlock Name="lblTitle" Text="{TemplateBinding Content}" HorizontalAlignment="Left"  Foreground="Gray" FontWeight="{TemplateBinding FontWeight}"   FontSize="24"  Margin="10" VerticalAlignment="Center" TextWrapping="WrapWithOverflow" TextAlignment="Left"/>
                </Grid>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <!--<Setter TargetName="Pressed" Property="Visibility" Value="Visible"/>-->

                </Trigger>
                <Trigger Property="IsFocused" Value="True">
                    <Setter TargetName="Focused" Property="Visibility" Value="Visible"/>
                    <Setter TargetName="lblTitle" Property="Foreground" Value="#f8cb1c" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

In my application, I call web service and depending upon the no of items, i create button for each item and finally add these button in StackPanel. Its works well. Stakpanel layout is on left side in screenshot. Now problem is that when I run this application on different machine which have different Screen resolution (like 1920 *1200), then font size seems too small. So i want to adjust font size when container size change. One option is use ViewBox but in case of ViewBox all buttons seems like have different font size and TextWrapping is not possible.

So my actual requirement is that increase/decrease the textblock’s font size with TextWrapping and font size must be even for all buttons.

Answer 1

You can use a LayoutTransform based on the screen resolution, you can either scale up your stackpanel or scale up the whole window depending on the resolution.

For the stackpanel:

<StackPanel>
    <StackPanel.LayoutTransform>
        <ScaleTransform  x:Name="ScaleTransform" />
    </StackPanel.LayoutTransform>
    <Button>A</Button>
    <Button>B</Button>
    <Button>C</Button>
    <Button>D</Button>
</StackPanel>

Then bind the ScaleX and ScaleY to a formula based on the resolution. An example of this:

double scale = System.Windows.SystemParameters.PrimaryScreenHeight / 720;
//using 720p as the base screen height.

this.ScaleTransform.ScaleX = scale;
this.ScaleTransform.ScaleY = scale;

You may want to do this in a ViewModel with some databinding if you are using MVVM.