Content gets cropped then scaling window

Question

enter image description here

I have a grid within a grid within a Dockpanel which I wants to fit the height of the window. The problem is that the content gets cropped at the bottom, and it's get more cropped the smaller the window is. (The reason I have a grid within a grid is that I whant the inner grid to be 8*8 regardless of what I otherwise do with the gui)

<Window x:Class="WPF_test.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WPF_test"
    mc:Ignorable="d"
    Title="MainWindow" WindowState="Maximized">
<DockPanel HorizontalAlignment="Center" VerticalAlignment="Stretch" Height="Auto" Width="Auto" Margin="0,0,0,0">
    <Menu Width="200" Height="40" VerticalAlignment="Top"/>
    <Grid VerticalAlignment="Stretch" 
          Height="{Binding ActualHeight, 
          RelativeSource ={RelativeSource AncestorType = {x:Type Window}}}" 
          Width="{Binding ActualHeight, 
          RelativeSource ={RelativeSource AncestorType = {x:Type Window}}}" 
          Margin="0,0,0,0" ShowGridLines="True">
        <Grid.Background>
            <ImageBrush Stretch="UniformToFill" 
                ImageSource="C:/Users/ppeterss/OneDrive/Pictures/sjakk/red_mahogany_wood_texture_by_sweetsoulsister.jpg" />
        </Grid.Background>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <Grid Height="Auto" Width="Auto" Margin="0,0,0,0" ShowGridLines="True" 
              Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="8" Grid.RowSpan="8" >
            <Grid.Background>
                <ImageBrush Stretch="Fill"
                ImageSource="C:/Users/ppeterss/OneDrive/Pictures/sjakk/WhiteBoards.png" />
            </Grid.Background>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>
        </Grid>
    </Grid>
</DockPanel>

`*` are [*star* units](https://stackoverflow.com/q/1768293/1997232). Not sure if that alone is your problem, consider to add screenshot demonstrating the issue otherwise. — Sinatr, Jan 25 '18 at 12:47
If you want to scale (zoom) content, then use `ViewBox`. I can't really follow your layout, why is there inner grid. You could simply use `UniformGrid` to draw chessboard. — Sinatr, Jan 25 '18 at 14:11
I have put everything inside a Viewobox and now it scales, zooms, resize beautifully! There are a lot of functions that relates to the columns and rows in the inner grid. I want to be able to rearange the outer grid without changing anything else in the code. I have however replaced the inner grid whith a UniformGrid. Thank you so much, you've made my day! Would answering my own question wiht the solution be the right thing to do now? — PellePetimeter, Jan 25 '18 at 15:19
[Yes](https://stackoverflow.com/help/self-answer), feel free to post answer to own questions. Just one thing to consider is how useful both question and answer will be for future readers (sometimes deleting the question is the right action), but that knowledge will come with experience. — Sinatr, Jan 25 '18 at 15:23

score 0 · Accepted Answer · answered Jan 25 '18 at 15:31

Thank's to Sinatr who gave me the solution (see comment). Puting the Dockpanel inside a Viewbox did the trick. It migth be a better way to implement this, but this code worked for me.

<Window x:Class="WPF_test.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WPF_test"
    mc:Ignorable="d"
    Title="MainWindow" WindowState="Maximized">
<Viewbox>
    <DockPanel HorizontalAlignment="Center" VerticalAlignment="Stretch" Height="Auto" Width="Auto" Margin="0,0,0,0">
        <Menu Width="200" Height="40" VerticalAlignment="Top"/>
        <Grid VerticalAlignment="Stretch" 
          Height="{Binding ActualHeight, 
          RelativeSource ={RelativeSource AncestorType = {x:Type Window}}}" 
          Width="{Binding ActualHeight, 
          RelativeSource ={RelativeSource AncestorType = {x:Type Window}}}" 
          Margin="0,0,0,0" ShowGridLines="True">
            <Grid.Background>
                <ImageBrush Stretch="UniformToFill" 
                ImageSource="C:/Users/ppeterss/OneDrive/Pictures/sjakk/red_mahogany_wood_texture_by_sweetsoulsister.jpg" />
            </Grid.Background>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>
            <UniformGrid Name="Board" Columns="8" Rows="8" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="8" Grid.RowSpan="8">
                <UniformGrid.Background>
                    <ImageBrush Stretch="Fill"
                ImageSource="C:/Users/ppeterss/OneDrive/Pictures/sjakk/WhiteBoards.png" />
                </UniformGrid.Background>
            </UniformGrid>
        </Grid>
    </DockPanel>
</Viewbox>

Content gets cropped then scaling window

1 Answers1