kuncarous
Topic Author
Posts: 4
Joined: 14 Nov 2018, 02:45

Stretch fill problem

17 Nov 2018, 02:57

I am trying to stretch a group of images using a viewbox, and works perfectly in Visual Studio (C# WPF), however when I try to test it with Noesis XamlPlayer doesn't stretch it down, seems like it is trying to keep the aspect ratio.

Here is a rar with the xaml, images and 2 png (expected.png using WPF compiled application, and bugged.png using XamlPlayer): https://www.mediafire.com/file/rrez8xx6 ... t.rar/file

Not sure if exists another way to do that, since I have a loading screen which need to do that for different resolutions compatibility.

Tags:
 
kuncarous
Topic Author
Posts: 4
Joined: 14 Nov 2018, 02:45

Re: Stretch fill problem

17 Nov 2018, 10:26

After hours I found a solution, just adding [HorizontalAlignment="Right" Width="410"] to every Grid row solved it, also had some bugs in WPF which got fixed with this, so now I can continue with the development.

Here is an example code:
    <Viewbox Stretch="Fill" StretchDirection="Both" SnapsToDevicePixels="True">
        <Grid UseLayoutRounding="True">
            <Grid.RowDefinitions>
                <RowDefinition Height="7*"/>
                <RowDefinition Height="25*"/>
                <RowDefinition Height="57*"/>
                <RowDefinition Height="11*"/>
            </Grid.RowDefinitions>
            <Grid Grid.Row="0" HorizontalAlignment="Right" Width="410">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Source="{StaticResource TopLeftBack}" Stretch="Fill"/>
                <Image Grid.Column="1" Source="{StaticResource TopRightBack}" Stretch="Fill"/>
            </Grid>
            <Grid Grid.Row="1" HorizontalAlignment="Right" Width="410">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="4*"/>
                    <ColumnDefinition Width="4*"/>
                    <ColumnDefinition Width="2*"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Source="{StaticResource MiddleBackLeftTop}" Stretch="Fill"/>
                <Image Grid.Column="1" Source="{StaticResource MiddleBackCenterTop}" Stretch="Fill"/>
                <Image Grid.Column="2" Source="{StaticResource MiddleBackRightTop}" Stretch="Fill"/>
            </Grid>
            <Grid Grid.Row="2" HorizontalAlignment="Right" Width="410">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="4*"/>
                    <ColumnDefinition Width="4*"/>
                    <ColumnDefinition Width="2*"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Source="{StaticResource MiddleBackLeftBottom}" Stretch="Fill"/>
                <Image Grid.Column="1" Source="{StaticResource MiddleBackCenterBottom}" Stretch="Fill"/>
                <Image Grid.Column="2" Source="{StaticResource MiddleBackRightBottom}" Stretch="Fill"/>
            </Grid>
            <Grid Grid.Row="3" HorizontalAlignment="Right" Width="410">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="5*"/>
                    <ColumnDefinition Width="5*"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Source="{StaticResource BottomLeftBack}" Stretch="Fill"/>
                <Image Grid.Column="1" Source="{StaticResource BottomRightBack}" Stretch="Fill"/>
            </Grid>
        </Grid>
    </Viewbox>
 
User avatar
sfernandez
Site Admin
Posts: 1911
Joined: 22 Dec 2011, 19:20

Re: Stretch fill problem

19 Nov 2018, 11:42

Hi,

In XamlPlayer loaded content is placed in a control with the following template:
<Border x:Name="Root">
  <Canvas>
    <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
      MinWidth="{Binding ActualWidth, ElementName=Root}"
      MinHeight="{Binding ActualHeight, ElementName=Root}"/>
  </Canvas>
</Border>
Content is measured with enough space to fill the screen, but it is allowed to take all the space it needs. So if you don't specify a Width and Height in the Grid contained in the Viewbox, then your xaml will be measured according to the original size of the included images.

Hope this helps understand the behavior you were experiencing.

Who is online

Users browsing this forum: No registered users and 1 guest