Forums | NoesisGUI

Posted: **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.

Posted: **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>

Posted: **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.

Forums | NoesisGUI

Stretch fill problem

Stretch fill problem

Re: Stretch fill problem

Re: Stretch fill problem