HiveBrain v1.2.0
Get Started
← Back to all entries
patterncsharpModerate

Grid UI layout for a database

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
databaseforgridlayout

Problem

I've spent a few days making the transition from WinForms to WPF, and do not have much time for tutorials as the work needs to be done quickly. I was wondering if anyone could take a look at a sample of my code and point out any conventions that I'm missing (and that are commonplace in modern WPF usage). I've picked a random sample of some XAML code which I've written:


    
        
            
            
        
        
            
            
        
        
            
        
    
    
        
            
                
                
                
                
                
                
                
                
                
                
            
            
                
                
                
                
            
            Server:
            
            
            Use Windows Authentication
            Username:
            
            Password:
            
            Database:
            
        
        
            Connect
            Reset
        
    


The code is functional and displays the proper result, however I am worried that I am not using the right techniques. Any input at all is greatly appreciated.

Solution

All in all, your code is quite well-structured. Here are a couple of suggestions for improvement:

-
Consider moving your styles to a resource dictionary:


    


This will de-clutter your file and allow you to re-use the styles in other windows.

-
Collapse empty tags (use the self-closing syntax):


    
    
    
    
    


(the same goes for the ColumnDefinitions and any other empty tags)

-
Declare styles that affect all controls of one type without a key:

 ... 
 ... 


That way, you don't seperately have to set all the labels to labelStyle and all the buttons to buttonsStyle, just remove all occurences of the following two attributes:

Style="{StaticResource labelStyle}"
Style="{StaticResource buttonsStyle}"


-
The default value of Grid.Column and Grid.Row is 0, you can get away without setting it explicitly. And CheckBox.Checked is false by default. So you can remove all occurences of the following:

Grid.Column="0" 
Grid.Row="0" 
IsChecked="False"


-
Generally, in WPF, widths and heights are not explicitly stated. You should try to use relative and automatic dimensions where possible (which often requires choosing the correct container).
For instance, you could use relative sizing for your grid columns:


    
    


In other situations, working with Margin can be a replacement for explicit pixel sizes. Remember that hard-coded sizes are an obstacle to localization (where long words in foreign languages are cropped) and less flexible.

These suggestions shrink your Window .xaml file from 54 to 37 lines (Resources.xaml has 14).

Code Snippets

<Window.Resources>
    <ResourceDictionary Source="Resources.xaml" />
</Window.Resources>
<Grid.RowDefinitions>
    <RowDefinition />
    <RowDefinition />
    <RowDefinition />
    <RowDefinition />
    <RowDefinition />
</Grid.RowDefinitions>
<Style TargetType="Button"> ... </Style>
<Style TargetType="Label"> ... </Style>
Style="{StaticResource labelStyle}"
Style="{StaticResource buttonsStyle}"
Grid.Column="0" 
Grid.Row="0" 
IsChecked="False"

Context

StackExchange Code Review Q#16445, answer score: 16

Revisions (0)

No revisions yet.