Wpf window resize while keeping aspect ratio with viewbox (dead white space)

monterScm 1 Reputation point
2021-10-01T19:00:02.563+00:00

I've been working with WPF and xaml for less than a year some I would still consider myself a novice.
So I know there are similar questions and I was trying to sift through them to find the answer.

I'm trying to resize the contents of the window upon the user resizing and to also keep the aspect ratio of the original design.

I saw to use a viewbox in general to adjust the scalability of the controls - this works great with the stretch set to uniform.

My problem lies when you re-scale the windows width or height substantially, there are white dead space bars around the outside of the viewbox control, which is not a desired look. Ive seen the window property for size to content (this gets disregarded when dragging the window and doesnt work to re-enable it). It seems that the view box resizes correctly but the window does not.

I've tried calculating the width and height and setting it directly with the size_changed event of the window, this only works when setting one value (width or height).

I've looked into changing the width and height by adding a hook with source_initialized and checking the WINDOWPOSCHANGING of the window. This seems to work upon the preview dragging but when when I release the hold, the window goes back to the original position without any change (this also only works with a one way set of width or height).
Ive also seen the flickering of the window as well and am going to look into the EXITSIZEMOVE message.

If any operation is the correct way, resizing does not seem to work when setting both width and height or calculating one and setting the other..

My question is,
Is there a way this can work through xaml only for smoothness and faster rendering, getting rid of the white space?
Is the better performance or correct way to resize through the hook?
Am I missing something obvious with xml or the hook or is this a normal 'problem'?

EDIT: This needs to work for resizing from any window edge drag. Not just the Width or just the right side.

I appreciate the feedback.

General xml is:

<Window Height="800" width=1000">
<Viewbox>
(All controls)
</Viewbox>
<Window>

Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,681 questions
{count} votes

2 answers

Sort by: Most helpful
  1. Hui Liu-MSFT 40,786 Reputation points Microsoft Vendor
    2021-10-04T07:01:19.29+00:00

    The ViewBox will be stretched by setting Stretch="Fill" and StretchDirection="Both" , and you can modify the layout to make the controls sized appropriately. It will stretch your control to the same size as the window, leaving no blank space. If I misunderstood your question, please point it out.
    The code of xaml:

    <Viewbox Stretch="Fill" StretchDirection="Both">  
            <Grid Background="AliceBlue">  
                <DataGrid ItemsSource="{Binding MyCollection}"  BorderBrush="Black" AutoGenerateColumns="False"  
                    BorderThickness="1"  
                    IsReadOnly="False" CanUserAddRows="True" >  
                    <DataGrid.Columns>  
                        <DataGridTextColumn Binding="{Binding Name}" Header="Name of person"/>  
                        <DataGridTemplateColumn Header="Age of person" >  
                            <DataGridTemplateColumn.CellTemplate>  
                                <DataTemplate>  
                                    <ComboBox ItemsSource="{Binding Path=DataContext.Source1, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Window}}"  
                                   SelectedValue="{Binding Age}"  SelectedValuePath="Number"  DisplayMemberPath="Number"/>  
                                </DataTemplate>  
                            </DataGridTemplateColumn.CellTemplate>  
                        </DataGridTemplateColumn>  
                        <DataGridTextColumn Binding="{Binding Salary}" Header="Persons salary"/>  
                    </DataGrid.Columns>  
                </DataGrid>  
            </Grid>  
        </Viewbox>  
    

    The picture of result:
    Stretch the window longitudinally
    137287-image.png
    Stretch window horizontally
    137341-image.png
    Stretch the window horizontally and vertically at the same time:
    137622-3.gif


    If the response is helpful, please click "Accept Answer" and upvote it.
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

  2. monterScm 1 Reputation point
    2021-10-04T12:27:20.847+00:00

    @Hui Liu-MSFT thanks for the feedback, so i had already seen this option but is there a way to keep the ratio as well as fill the screen? Similar to the uniform option but also adjust to a change in window size.
    The stretch option for 'uniform to fill' wouldve sounded like the correct option but it will cut the content when it extends outside the window

    I guess what im thinking wouldnt really "stretch" the content but prevent the user from resizing the window out side of the original ratio? I hope that makes sense.