0

I am haveing trouble scaling part of my inner grid to a specific size. The thing is, what I want to do, is create a border around a place, where I will later insert image in. I want my app to be scalable, but currently, I am unable to create this.

So, here is my code:

<Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="100" />
            <RowDefinition Height="200*" />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="100*" />
            <ColumnDefinition Width="100*" />
            <ColumnDefinition Width="50" />
        </Grid.ColumnDefinitions>


        <Button Grid.Row="0" Grid.Column="0"
                Style="{StaticResource ReturnBackButtonStyle}"
                Command="{Binding ReturnFromSearchingCommand, Mode=OneWay}" />

        <TextBlock Grid.Row="1" Grid.Column="1"
                   Text="Game"
                   FontSize="48"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />

        <TextBlock Grid.Row="1" Grid.Column="2"
                   Text="Controls"
                   FontSize="48"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />

        <Canvas Grid.Row="2" Grid.Column="1"
                Background="LightBlue" 
                Name="MyCanvas" 
                Focusable="True">

            <Grid ShowGridLines="True">
                <Grid.RowDefinitions>
                    <RowDefinition Height="100" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="50" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition />
                    <ColumnDefinition Width="50" />
                </Grid.ColumnDefinitions>

               /* .. Mouse triggers .. */

                <Canvas Grid.Row="0" Grid.Column="0">
                    <Label Name="MashKey" Content="Current key to Mash: NONE" FontSize="18" FontWeight="Bold" Foreground="White"/>
                </Canvas>
                <Canvas Grid.Row="0" Grid.Column="2">
                    <Label Background="Red" Name="MashedCount" Content="Last Mash Count: 0" FontSize="18" FontWeight="Bold" Canvas.Right="0" Foreground="White"/>
                </Canvas>

                <Canvas Background="Black" IsHitTestVisible="False" Grid.Column="1" Grid.Row="1" 
                           HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                           >
                    <Viewbox StretchDirection="DownOnly" >
                        <Rectangle Fill="Red" 
                                   HorizontalAlignment="Stretch" 
                                   VerticalAlignment="Stretch"
                                   Width="auto" 
                                   Height="auto" ></Rectangle>
                    </Viewbox>
                </Canvas>


            </Grid>
        </Canvas>


            <DockPanel Grid.Row="2" Grid.Column="2">
                /* ... the right side of the first Grid ... works fine for now .. */
            </DockPanel>


    </Grid>

The outter Grid works perfectly fine, even the "Canvas Right". But unfortunately, I am unable to make the middle part of the 2nd grid to scale up to its max potential. Any idea how can I do this ? Thank you in advance!

Haukinger
  • 10,420
  • 2
  • 15
  • 28
StyleZ
  • 1,276
  • 3
  • 11
  • 27
  • What do you expect from `200*`? In your setup that's exactly the same as `*`. Do you miss some `*`s? – Haukinger Sep 20 '21 at 15:52
  • 1
    Why are there all these Canvases? They seem to be totally redundant and they break your layout. Be aware that a Canvas does not apply any sizing to its child elements. – Clemens Sep 20 '21 at 15:52
  • 1. Tbh that `200*` is there cuz I was resizing it to `200` to see whether it has any effect, I mostly use `*`. (I also was playing with the grid above). if I understand it correctly, the 200* should mean that its 200 times bigger than a single `*` ... for example if I have `*` and `3*`, the `3*` will be always 3 times bigger than the `*` . Do I understand it right ? – StyleZ Sep 20 '21 at 17:31
  • Why all the Canvases. To me It seemed like a bit better way to layout the whole code. But if you say that it breaks it, then I was wrong. (same thing aboyt sizing, I did not know that) – StyleZ Sep 20 '21 at 17:32

0 Answers0