WPF C# responsive design

[DaybreakOmega]

Hi everyone,

 

I am learning C# through evening school and I have a question regarding responsive design in WPF applications and what the best practices are. I've been looking op quite some info and most examples I see seem to implement mostly grids and nesting them. I created the following design for a Rock-Paper-Scissors app. However, because I had some trouble with the stackpanel on the left acting strange I asked some feedback from my teacher. She didn't really comment the design other that I build it up pretty weird.

So now I'm trying to figure out what the best way is to create a nice, fluent design that scales properly. Down below is a screenshot and the xaml code of the layout. Perhaps somebody here can tell my if the design is somewhat correct regarding best practices or that I did a real poor job

 

Screenshot of the app:

 

 

The code (I only posted the actual grid of the application)

 

<Grid>
        <!--Main grid definitions-->
        <Grid.RowDefinitions>
            <RowDefinition Height="25"/>
            <RowDefinition Height="40"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="13*"/>
            <ColumnDefinition Width="20"/>
            <ColumnDefinition Width="68*"/>
            <ColumnDefinition Width="20*"/>
        </Grid.ColumnDefinitions>

        <!--TITEL BAR-->
        <Grid Background="#030322" Grid.ColumnSpan="4" MouseDown="Grid_MouseDown">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <Button Style="{StaticResource closeButton}" x:Name="BtnSluiten" Content="X"  FontSize="12" FontWeight="Medium" Grid.Column="13" Click="BtnSluiten_Click" />
            <Button Style="{StaticResource windowButton}" x:Name="BtnMaximize" Content="&#9633;" FontSize="20" FontWeight="Medium" Grid.Column="12" Click="BtnMaximize_Click"/>
            <Button Style="{StaticResource windowButton}" x:Name="BtnMinimize" Content="-" FontSize="14" FontWeight="Medium" Grid.Column="11" Click="BtnMinimize_Click"/>

        </Grid>

        <!-- MENU -->
        <Grid Grid.ColumnSpan="4" Grid.Row="1">
            <Menu>
                <MenuItem Template="{StaticResource topMenuItem}" Header="Bestand">
                    <MenuItem Template="{StaticResource subMenuItem}" Header="Sluiten"/>
                </MenuItem>
                <MenuItem Template="{StaticResource topMenuItem}" Header="Help">
                    <MenuItem Template="{StaticResource subMenuItem}" Header="Regels"/>
                </MenuItem>
            </Menu>
        </Grid>

        <!-- User choice stackpanel -->
        <StackPanel Grid.Row="2" Grid.ColumnSpan="1"  Margin="20">
            <Viewbox Margin="0,0,0,30">
                <Button x:Name="BtnBlad" Style="{DynamicResource ButtonBlad}" Click="BtnBlad_Click"/>
            </Viewbox>
            <Viewbox Margin="0,0,0,30">
                <Button x:Name="BtnSteen" Style="{DynamicResource ButtonSteen}" Click="BtnSteen_Click"/>
            </Viewbox>
            <Viewbox Margin="0,0,0,20">
                <Button x:Name="BtnSchaar" Style="{DynamicResource ButtonSchaar}" Click="BtnSchaar_Click"/>
            </Viewbox>
        </StackPanel>


        <!-- STATUS BAR -->
        <StatusBar Grid.Row="3" Grid.ColumnSpan="4" Background="#0F0F2D" Foreground="White" HorizontalAlignment="Stretch">
            <StatusBarItem Content="Ready" Foreground="White" Margin="10,0,5,0"/>
            <StatusBarItem Margin="5,0,5,0">
                <Image Source="img/logo.png" />
            </StatusBarItem>
            <StatusBarItem  Margin="5,0,0,0">
                <Label Content="" Foreground="White"/>
            </StatusBarItem>
            <StatusBarItem HorizontalAlignment="Right" >
                <Label Content="Hier komt de tijd te staan" Foreground="White"/>
            </StatusBarItem>
        </StatusBar>

        <!-- Playingfield Grid -->
        <Grid Grid.Column="2" Grid.Row="2">
            <!-- playfield grid definitions -->
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="65*"/>
                <RowDefinition Height="35*"/>
            </Grid.RowDefinitions>

            <!-- User playingfield -->
            <Grid Grid.Row="0" Grid.Column="0" Margin="20">
                <Image Source="img/blad.png"/>
            </Grid>
            <Grid Grid.Row="1" Grid.Column="0" Margin="0,0,0,0">
                <Viewbox>
                    <Label Content="5" Foreground="White"/>
                </Viewbox>
            </Grid>
            
            <!-- Computer playingfield -->
            <Grid Grid.Row="0" Grid.Column="1" Margin="20">
                <Image Source="img/blad.png"/>
            </Grid>
            <Grid Grid.Row="1" Grid.Column="1" Margin="0,0,0,0">
                <Viewbox>
                    <Label Content="5" Foreground="White"/>
                </Viewbox>
            </Grid>
        </Grid>

    </Grid>

 

[Franck]

You should not use fix dimensions like you are currently doing. As I see it the image seems square so height and width should be linked and left side look like 15% width and right 85%. Then Screen DPI and resolution will take care of the rest. The worst thing you can doo is setting specific pixel size

[straight_stewie]

In my personal opinion, the Grid is one of the most overused elements in WPF.

You can build this with 6 StackPanels, which will make it easier to add, remove, or change the game elements, and virtually not change in any way your ability or means to control the relative sizes of components.

8 hours ago, DaybreakOmega said:

She didn't really comment the design other that I build it up pretty weird.

 

 

Here's a graphic to help visualize this.

 

 

As a tip for building a layout this way, docking the stackpanels to simple window locations is useful, and so are the horizontal and vertical alignment properties available on the StackPanel element.

 

 

Spoiler

In my opinion, the StackPanel should have been the default parent element in a new XAML file, instead of the grid. You can build very nearly any layout you can build with a grid with StackPanels, and you can do so with less typing and easier maintenance, at least for smaller applications.

For large applications, managing the scope of UI element naming can become a problem when using a tree of stackpanels, because it becomes more and more difficult to access elements the further down on the tree they are.

 

[MisterWhite]

I've worked and sometimes still am working with WPF professionally and I would not recommend it for anything bigger and if the project needs rich controls. Only commercial packages (costing hundreds to thousands of $) have enough functionality for bigger apps. I'd say if you need rich UI desktop apps use something like Electron or anything else JS based just because of the free functionality.