WPF summary
1, Content versioning
1. Necessity of project content management
Project development: project initiation -- > code development -- > O & M generates many documents
2. Common version control tools
Git/SVN
3. Git and GitHub/GitLab
4. Code management practice
2, Interface layout control
1. Start with the application development process
WPF: business logic
UI: Windows / controls
2. Window layout of desktop application
3. WPF layout principle and principle
- Set the size of the element without displaying it
- The location is specified without screen coordinates
4. WPF common layout controls and layout composition
-
Gride
Features:
Powerful and flexible container
Two row four column table
<Grid > <Grid.ColumnDefinitions> <ColumnDefinition Width="auto"></ColumnDefinition> <ColumnDefinition Width="auto"></ColumnDefinition> <ColumnDefinition Width="auto"></ColumnDefinition> <ColumnDefinition Width="auto"></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="auto"></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Button Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2" Grid.RowSpan="2">Submit</Button> </Grid> Attribute remarks: Width= "auto" Column width adaptation MinWidth Minimum width MaxWidth Maximum width Height="auto" Row height adaptation MinHeight Minimum height MaxHeight Maximum height Grid.Column Which column of the button starts from 0 Grid.Row Which line of the button starts from 0 Grid.ColumnSpan Span columns span right from the current column Grid.RowSpan Cross row: cross row down from the current rowList data layout commonly used in projects:
<Grid Background="Orange" Grid.IsSharedSizeScope="True"> <Grid.RowDefinitions> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> </Grid.RowDefinitions> <!--Header--> <Grid > <Grid.ColumnDefinitions> <ColumnDefinition Width="100" SharedSizeGroup="A"> </ColumnDefinition> <ColumnDefinition ></ColumnDefinition> <ColumnDefinition ></ColumnDefinition> </Grid.ColumnDefinitions> <Border VerticalAlignment="Center" > <TextBlock FontSize="15" VerticalAlignment="Center">user name</TextBlock></Border> <Border Grid.Column="1"> <TextBlock VerticalAlignment="Center" FontSize="15">Mailbox number</TextBlock> </Border> <Border Grid.Column="2"> <TextBlock VerticalAlignment="Center" FontSize="15">state</TextBlock> </Border> <GridSplitter HorizontalAlignment="Right" Width="5" Background="Black" VerticalAlignment="Stretch" ></GridSplitter> <GridSplitter HorizontalAlignment="Right" Width="5" Background="Black" VerticalAlignment="Stretch" Grid.Column="1"></GridSplitter> </Grid> <!--data--> <Grid Grid.Row="1" Background="White"> <Grid.ColumnDefinitions> <ColumnDefinition SharedSizeGroup="A"></ColumnDefinition> <ColumnDefinition ></ColumnDefinition> <ColumnDefinition ></ColumnDefinition> </Grid.ColumnDefinitions> <Border VerticalAlignment="Center" > <TextBlock FontSize="15" VerticalAlignment="Center">Xiao Ming</TextBlock> </Border> <Border Grid.Column="1"> <TextBlock VerticalAlignment="Center" FontSize="15">1142105884@qq.com</TextBlock> </Border> <Border Grid.Column="2"> <TextBlock VerticalAlignment="Center" FontSize="15" >cancellation</TextBlock> </Border> </Grid> </Grid> remarks: Grid.IsSharedSizeScope="True" :Allow dimension sharing SharedSizeGroup="A" : Set size shared columns (which column is shared with which column) [Header and data column must be added]) //Set column drag block <GridSplitter HorizontalAlignment="Right" Width="5" Background="Black" VerticalAlignment="Stretch" ></GridSplitter> -
StackPanel
-
<StackPanel Orientation="Horizontal"> <Border> <TextBlock>home page</TextBlock></Border> <Border> <TextBlock>home page</TextBlock> </Border> <Border> <TextBlock>home page</TextBlock> </Border> </StackPanel> remarks: Orientation="Horizontal" : Lateral arrangement Orientation="Vertical" : Vertical arrangementUsage scenario: everywhere, ToolBar, menu bar
Disadvantages: no line breaks
-
DockPanel [container]
Layout through Dock docking.
Additional attributes:
DockPanel.Dock Top/
LastChildFill: true/false whether the last control fills the remaining space.
<DockPanel LastChildFill="True"> <Button Content="button1" DockPanel.Dock="Top"></Button> <Button Content="button2" DockPanel.Dock="Bottom"></Button> <Button Content="button3" ></Button> <Button Content="button4" DockPanel.Dock="Right"></Button> <Button Content="button5" ></Button> </DockPanel> remarks: DockPanel.Dock="Top" : button The top attribute is DockPanel Inside. LastChildFill="True" : Whether the last control fills the remaining space.Usage scenario: functional area division
-
WrapPanel
The only layout control that cannot be replaced by a grid.
Main attribute: Orientation: Horizontal/Vertical can wrap
Usage scenario: interface icon layout
<WrapPanel Orientation="Horizontal"> <Button Content="button" Width="100"></Button> <Button Content="button1" Width="150"></Button> <Button Content="button2" Width="50"></Button> <Button Content="button3" Width="80"></Button> </WrapPanel> -
UniformGride
Another style layout automatically generates uniform rows and columns
Main attributes: Rows="5" Columns="2"
Usage scenario: instrument panel cockpit
<UniformGrid Rows="5" Columns="2"> <Button Content="button1"></Button> <Button Content="button2"></Button> <Button Content="button3"></Button> <Button Content="button4"></Button> <Button Content="button5"></Button> <Button Content="button6"></Button> <Button Content="button7"></Button> <Button Content="button8"></Button> <Button Content="button9"></Button> </UniformGrid> -
Canvas
Positioning child elements by precise coordinates
Main configuration attribute: canvas Top/Left/Right/Bottom
Usage scenario: edit scenario (configuration)
<Canvas > <Button Content="button1" Canvas.Top="200" ></Button> <Button Content="button2" Canvas.Top="20" Canvas.Left="400"></Button> <Button Content="button3"></Button> </Canvas>
InkCanvas
Input controls that support arbitrary strokes
Usage scene: Sketchpad
<InkCanvas EditingMode="Ink">
<InkCanvas.DefaultDrawingAttributes>
<DrawingAttributes Color="Red" Width="10"></DrawingAttributes>
</InkCanvas.DefaultDrawingAttributes>
<Button Content="button1" InkCanvas.Top="50"></Button>
<Button Content="button2" InkCanvas.Left="100"></Button>
<Button Content="button3"></Button>
</InkCanvas>
EditingMode="Ink" Handwritten Strokes
EditingMode="Select" Zoom in control
EditingMode="GestureOnly"
Strokes : Get strokes
DefaultDrawingAttributes : Sets the color and width of strokes
Border
The most basic decorative control
Main attribute configuration: CornerRadius setting fillet
Usage scene: drawing edge lines and background color fillets are frequently used
<Border CornerRadius="4">
<Grid>
</Grid>
</Border>
Extended layout control
TabControl TabItem TabPanel
Toolbar Panel ToolbarOverflowPanel
Virtualizing StackPanel (virtualized StackPanel) has excellent performance
Special container
Scrollviewer
GroupBox
Expander
5. Layout principle and custom practice
From layout principle to layout process
All layout controls have their own specific ways
All inherited from Panel
Two processes: measurement + arrangement
6. Layout practice