WPF布局示例1

WPF布局示例1

看了刘铁猛老师的深入签出WPF教程以后，学会了一些基础的内容。就决定动手练习，这个是按照B站上面的教程一步一步跟着坐下来的Demo.一是记录自己学习的过程，二是给需要学习的朋友一点参考

<Window x:Class="WPF_basic0.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_basic0"
        mc:Ignorable="d"
        Title="MainWindow" Height="700" Width="400" >
    <Border Padding="10">
        <StackPanel>
            <!--BUttons-->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button Name="btnApply" Grid.Column="0" Margin="0 0 10 0">Apply</Button>
                <Button Name="btnReset" Grid.Column="1">Reset</Button>
                <Button Name="btnRefresh" Grid.Column="2" Margin="10 0 0 0" >Refresh</Button>
            </Grid>
            
            <TextBlock Text="Pulse Properties"  FontWeight="Bold" Margin="0 10"/>
            <!--Description-->
            <TextBlock Text="Description" />
            <TextBox Name="DescriptionTxb" Padding="2"/>
            <!--Status and Revision-->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <!-- Status -->
                <StackPanel Margin="0 0 10 0" Grid.Column="0">
                    <TextBlock Text="Status" Grid.Column="0" HorizontalAlignment="Left"/>
                    <TextBox Padding="2" IsReadOnly="True" Background="#eee"/>
                </StackPanel>
                <!-- Revision -->
                <StackPanel Orientation="Vertical" Grid.Column="1">
                    <TextBlock Text="Status" Grid.Column="0" HorizontalAlignment="Left"/>
                    <TextBox Padding="2" IsReadOnly="True" Background="#eee"/>
                </StackPanel>
                
             
                
            </Grid>
            
            <!-- Part Nnumber -->
            <StackPanel>
                <TextBlock Text="Part Number"/>
                <TextBox Padding="2" IsReadOnly="True" Background="#eee"/>
            </StackPanel>
            
            <!-- Raw Material-->
            <StackPanel >
                <TextBlock Text="Raw Material" FontWeight="Bold"/>
                <TextBlock Text="Raw Material" Margin="0 10 0 0"/>
                <ComboBox Padding="2" IsReadOnly="True" Background="#eee"/>

            </StackPanel>

            <!-- Manufacturing Info-->
            <StackPanel>
                <TextBlock Text="Manufacturing Info" FontWeight="Bold"/>
                <TextBlock Text="Work Centres" Margin="0 10 0 10"/>
            </StackPanel>
            
            <!-- CheckBox-->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <!-- Column1 -->
                <StackPanel Grid.Column="0">
                    <CheckBox Content="Weild"/>
                    <CheckBox Content="Assembly"/>
                    <CheckBox Content="Plasma"/>
                    <CheckBox Content="Laser"/>
                    <CheckBox Content="Purchase"/>

                </StackPanel>
                <!-- Column2 -->
                <StackPanel Grid.Column="1">
                    <CheckBox Content="Lathe"/>
                    <CheckBox Content="Drill"/>
                    <CheckBox Content="Fold"/>
                    <CheckBox Content="Roll"/>
                    <CheckBox Content="Saw"/>

                </StackPanel>
            </Grid>
            
            <!-- Length -->
            <StackPanel>
                <TextBlock Text="Length"/>
                <TextBox Padding="2"/>
            </StackPanel>

            <!-- Mass -->
            <StackPanel >
                <TextBlock Text="Mass"/>
                <TextBox Padding="2" IsReadOnly="True" Background="#eee"/>
            </StackPanel>

            <!-- Finished -->
            <StackPanel >
                <TextBlock Text="Finished"/>
                <ComboBox SelectedIndex="0" Padding="2">
                    <ComboBoxItem>Painted</ComboBoxItem>
                    <ComboBoxItem>NOt Painted</ComboBoxItem>
                </ComboBox>
            </StackPanel>
            <!-- Purchase Information -->
            <StackPanel >
                <TextBlock Text="Purchase Information"/>
                <ComboBox SelectedIndex="0" Padding="2">
                    <ComboBoxItem>Rubber</ComboBoxItem>
                    <ComboBoxItem>NOt Rubber</ComboBoxItem>
                </ComboBox>
            </StackPanel>
            <!-- Supplier Name -->
            <StackPanel >
                <TextBlock Text="Supplier Name"/>
                <TextBox Padding="2" />
            </StackPanel>

            <!-- Supplier Code -->
            <StackPanel >
                <TextBlock Text="Supplier Code"/>
                <TextBox Padding="2" />
            </StackPanel>
            <!-- Additional Info -->
            <StackPanel Margin="0 10 0 0" >
                <TextBlock Text="Additional Info" FontWeight="Bold"/>
                <TextBlock Text="Note" Margin="0 10 0 0"/>
                <TextBox/>
            </StackPanel>
        </StackPanel>
    </Border>
</Window>

界面的设计效果如下：

参考视频