Viewbox scales things too small at high resolutions and scale factors and they are virtually impossible to see

40 views Asked by At

I have a grid with one row and some columns. In order to scale correctly the grid content according to the screen resolution and scale selected in the Windows OS, I use a Viewbox.

I also define a style that is applied to all Viewboxes:

<Style TargetType="{x:Type Viewbox}">
    <Setter Property="Stretch" Value="Uniform"/>
    <Setter Property="StretchDirection" Value="Both"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="OverridesDefaultStyle" Value="False"/>
    <Setter Property="UseLayoutRounding" Value="False"/>
</Style>

And then I enclose every grid column within a Viewbox:

<Grid Focusable="True"
      Height="Auto">
    <Grid.ColumnDefinitions>
        <!-- Animated image -->
        <ColumnDefinition Width="Auto" />
        <!-- Stack panel with icon and text -->
        <ColumnDefinition Width="Auto" />
        <!-- A vertical separator -->
        <ColumnDefinition Width="Auto" />
        <!-- A button -->
        <ColumnDefinition Width="Auto" />
        <!-- Empty dummy column to help distribute space correctly between columns so it will cause next columns to be horizontally right aligned. -->
        <ColumnDefinition Width="*" />
        <!-- Help button -->
        <ColumnDefinition Width="Auto" />
        <!-- Three dots button -->
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <Viewbox Grid.Column="0">
        <StackPanel Orientation="Horizontal"
                Visibility="{Binding Path=IsAnimatedImgVisible, Converter={StaticResource BoolToVisibility}}">
        <v:UserControlAnimatedImg x:Name="UcSpinner" VerticalAlignment="Center" HorizontalAlignment="Left"/>
        <Label SnapsToDevicePixels="True"
               RenderOptions.BitmapScalingMode="HighQuality"
               VerticalAlignment="Center" HorizontalAlignment="Left"
               Content="{Binding Path=StatusText}"/>
        </StackPanel>
   </Viewbox>

   <Viewbox Grid.Column="1">
       <StackPanel Orientation="Horizontal">

            <Image
               Margin="10,5"
               Height="24"
               Width="24"
               MaxHeight="24"
               MaxWidth="24"
               VerticalAlignment="Center"
               HorizontalAlignment="Center"                   
               SnapsToDevicePixels="True"
               RenderOptions.BitmapScalingMode="HighQuality"
               Source="{Binding Path=Icon}"/>

            <Label 
               VerticalAlignment="Center"
               HorizontalAlignment="Left"
               Content="{Binding Path=StatusTxt}"
               SnapsToDevicePixels="True"
               RenderOptions.BitmapScalingMode="HighQuality">
            </Label>
        </StackPanel>
    </Viewbox>

    <Viewbox Grid.Column="2">
        <Separator Margin="10,5,5,5"
                   Height="26"
                   Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}">
   </Viewbox>

   <Viewbox Grid.Column="3">
       <Button Height="Auto"
               Width="150"
               Command="{Binding ButtonOnClick}">
            <StackPanel Orientation="Horizontal">
                <Image 
                   Height="24"
                   Width="25"
                   MaxHeight="24"
                   MaxWidth="25"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   SnapsToDevicePixels="True"
                   RenderOptions.BitmapScalingMode="HighQuality"
                   Source="{Binding ImageIcon}"/>

                <TextBlock
                   Margin="10,2,5,2"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Left"
                   Text="{x:Static p:Resources.BtnText}"
                   SnapsToDevicePixels="True"
                   RenderOptions.BitmapScalingMode="HighQuality">
                </TextBlock>
             </StackPanel>
      </Button>
    </Viewbox>

    <!-- Empty dummy space to help distribute space correctly between columns and
         make next columns to be horizontally right aligned. This column will be blank   
         space.-->
    <Viewbox Grid.Column="4">
        <ContentControl />
    </Viewbox>

    <Viewbox Grid.Column="5">
        <Button Height="25"
                Width="25"
                MaxHeight="25"
                MaxWidth="25"
                Margin="8,0,5,0"
                Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
                Command="{Binding BtnHlpClick}">
            <Image HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   SnapsToDevicePixels="True"
                   RenderOptions.BitmapScalingMode="HighQuality"
                   Source="{Binding ImageHelpIcon}"/>
        </Button>
    </Viewbox>

    <Viewbox Grid.Column="6">
        <StackPanel x:Name="PlaceHolder"
                    VerticalAlignment="Center"
                    Margin="2,0,12,0"
                    Width="27"
                    Height="Auto">
            <Image HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Height="20"
                   Width="20"
                   SnapsToDevicePixels="True"
                   RenderOptions.BitmapScalingMode="HighQuality"
                   Source="{Binding ImgThreeDotsIcon}">
                <Image.ContextMenu>
                    <ContextMenu Placement="Bottom" Background="#FFFFFF">
                        <MenuItem Header="{x:Static p:Resources.mnutext}" Command="{Binding MenuOnClick}"></MenuItem>
                    </ContextMenu>
                </Image.ContextMenu>
            </Image>
        </StackPanel>
  </Viewbox>

The problem I am currently facing is that when I switch to high screen resolutions and also I switch to high scale factor (125%, 150%, 175%, 200%, and so on), then the content of the grid is getting smaller and smaller and it is practically impossible to see. The more screen resolution I select, the more smaller is the grid content. The more scale factor I select, the more smaller is the grid content. The problem is that the grid content gets too small and impossible to see.

How can I solve this?

0

There are 0 answers