directory
Controls and layout
preface
Why WPF?
I was a bit resistant to WPF at the beginning, because there were few people using it. The feeling is that forms applications can be different from Winform. But I was wrong. I would like to thank my lecturer very much for recommending Liu Tiemeng’s WPF to me, which made me understand the charm of WPF — data-driven UI.
So, such an excellent framework, which I want to write down, is known to have so few WPF developers that most of the tutorial videos are 10 years old. I wrote it down, not for anything, but because I really like WPF, the “weird” feeling.
I. UI layout
As the saying goes, “Clothes make the man.”
What does that mean? It means that people put on a decent clothes, will look particularly energetic; Your horse looks especially beautiful when you have a good saddle-cloth. Clothes have a great influence on the appearance of the human body. From Xue Rengui Zheng Er.
So, let’s introduce this into WPF
- WPF as a special user interface technology, the function of layout is one of its core functions. A well-designed layout is essential to a friendly user interface and a good user experience.
- Layout is static, animation is dynamic, and user experience is how the user feels when interacting with software functions.
- In other words, layout is WPF clothes!
Second, the control
“My old life gull water together, he used to romantic Hong Cast.”
It means that wild animals and wild gulls are inseparable
What about WPF? The layout of a page is displayed. It’s all made up of one control after another. Controls are inseparable from the WPF environment, which constitutes a beautiful and vivid picture (layout).
Before we begin to study these layout elements, we need to know that each layout element has its own characteristics and we need to use them flexibly. Don’t use everything. Mix it up.
(Just like the ecological environment, to be reasonable collocation, otherwise there will be “biological invasion” this kind of “stealing chicken can not erode rice” behavior, increasing the burden of the ecological environment. Damage)
1. Classification of controls
Roughly speaking, there are no more than six types of controls that we deal with most in our daily work, namely:
- 1, layout controls: can accommodate multiple controls or nested other layout controls, used to organize and arrange controls on the UI, such as: StackPanel, Grid, Dock, WrapPanel, Canvas;
- 2, content control: can only accommodate one other control or layout control as its content, such as: Button, Window;
- 3, content control with title: equivalent to a content control, but can add a title, such as: Group Box, TabItem;
- 4, item control: can display a column of data, under normal circumstances this column of data type is the same. Such as the ListBox, ComboBox;
- 5, with the title of the item control: equivalent to an item control to add a title display area, such as: TreeViewItem, MenuItem, often used to display hierarchical data;
- 6. Special content controls: TextBox holds strings, TeztBlock holds text in freely controlled formats, Image holds image-type data… This type of control is relatively independent.
As for, why so classification, in fact, we only need to appreciate, you will understand. If I have to, you pull it out of the toolbar, and you look at it, and you look at me. “What? You don’t understand “……………………………… The author died
Well, we don’t do these controls too much detail, we mainly introduce the control layout, other believe properties can refer to the following: using WPF basic control is introduced: blog.csdn.net/niewq/artic…
Three, layout control
All right, here we are. WPF provides us with 5 layouts, each of which has different characteristics and can be nested with each other. Let’s take a look.
- Grid: List layout
- 2. StackPanel: StackPanel layout
- 3, WrapPanel: flow layout panel (when elements are aligned horizontally and the content exceeds the width, auto wrap; Automatically swap columns when elements are vertically aligned and content exceeds height)
- 4. DockPanel: DockPanel
- Canvas: Coordinate panel
1. Grid list layout
The word Grid is translated into English. That’s right, it’s like a grid that divides our pages into sections.
Why are they all on top of each other?
Because we didn’t make any adjustments to the Grid container, it is now a “big Grid” row by column. Of course they overlap in one, unless the Magin attribute is set, which is not what we want to achieve.
So, we go through the Settings
- Column < Grid. ColumnDefinitions > < / Grid ColumnDefinitions >
- Line < Grid. RowDefinitions > < / Grid RowDefinitions >
“Grid”
We can divide our Grid into cells by adding ColumnDefinitions and RowDefinitions nodes.
As shown in the figure, it is divided into four grids:
Oh? No, why do our controls overlap? Because we didn’t set what cell they’re in, so let’s go ahead and download it.
Determine the location, and merge the cells
When our container is in a Grid layout container, we add additional properties:
- Row position: grid. Row=”0″
- Grid.Column=”0″
It’s not set by default, it’s 0, that’s why it overlaps, so let’s adjust the position.
Ok, everything is back to normal, add a button, how can login without a button!
By setting the
- Row cell merge: grid. RowSpan=”1″
- ColumnSpan=”1″
The default bit is 1. With some modifications, our interface looks like this:
The forehead… It’s a little ugly, so let’s add some attributes to adjust it,
Set the width of high
We set the Height by setting the Width of the ColumnDefinition and the Height of the RowDefinition
Width and Height support pixels, proportions, and customization
- Pixel: just use numbers to represent it
- Proportion: in * units
- Auto: Set the value bit auto
Ok, let’s apply the above knowledge and adjust our view:
conclusion
Ok, let’s summarize the top width and height:
- First we set the scale of the Grid’s columns to 1:3 (*, 3*). When we pull the window size, we’ll see that it scales equally.
- Second, we set two fixed heights for the rows of the Grid. We can see that their heights remain the same no matter how the form changes.
- The last row is adaptive, and I deliberately set the height of the button to 100, and you can see that the last row of the table is also 100, so you can see that auto is adaptive based on the content.
A StackPanel
StackPanel StackPanel StackPanel StackPanel StackPanel StackPanel
Set the direction
By setting Orientation
- Horizontal: Orientation=”Horizontal”
- Orientation: Orientation=”Vertical” (default)
- HorizontalAlignment=”left” Center,right
- VerticalAlignment=”Top” Bottom,Center,Stretch
3, WrapPanel flow layout
Wrap when elements are horizontally aligned and the content exceeds the width; Automatically swap columns when elements are vertically aligned and content exceeds height)
It might look like this, but it’s not the same. StackPanel overflows the form when the number of internal child elements exceeds the width (height), and the flow layout wraps itself. Often used for dynamic data generation.
I’m not going to go into detail here, but the properties are the same as above.
4, DockPanel dock layout
Winfrom development friends, all know a Docl attribute, so our Dock layout is also this truth, let’s practice.
DockPanel.Dock adds an additional property to the DockPanel container control
- DockPanel.Dock=”Top”
- DockPanel.Dock=”Bottom”
- DockPanel.Dock=”Left”
- DockPanel.Dock=”Right”
It should be noted that the controls will have different width and height (or size) according to the order set. By default, the size of the last control docked occupies all the rest of the interface
5. Canvas coordinate layout
Ok, this is really equivalent to winForm layout, set the coordinates, determine the position of the control.
Controls in the Canvas container add additional properties
- Distance from Top of window: Canvas.Top=”20″
- Distance window Left: Canvas.Left=”100″
- Distance below window: Canvas.Bottom=”20″
- Distance window Right: Canvas.Right=”0″
4. Comprehensive small cases
If we’re done, let’s do a little case study.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="* 4"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.RowSpan="2" Grid.Column="0">
<Button Height="50"> create a new StackPanel</Button> <Button Height="50"> save StackPanel</Button> <Button Height="50"> add StackPanel</Button> <Button Height="50"<Button Height= <Button Height="50"<Button Height= <Button Height="50"> Close StackPanel</Button> </StackPanel> <DockPanel grid. Row="0" Grid.Column="1">
<TextBlock DockPanel.Dock="Top" HorizontalAlignment="Center"< buttonwidth = "buttonwidth" style = "box-sizing: border-box! Important; word-wrap: break-word! Important;"200">WrapPanel</Button>
<Button Width="200">WrapPanel</Button>
<Button Width="200">WrapPanel</Button>
<Button Width="200"<Button Width= "buttonwidth" style = "box-sizing: border-box; color: RGB (51, 51, 51)"200">WrapPanel</Button>
</WrapPanel>
</DockPanel>
<Canvas Grid.Row="1" Grid.Column="1">
<TextBlock Canvas.Top="100" Canvas.Left="100">Canvas account: </TextBlock> <TextBox canvas.top ="100" Canvas.Left="200"</TextBox> <TextBlock canvas.top ="130" Canvas.Left="100">Canvas password: </TextBlock> <TextBox canvas.top ="130" Canvas.Left="200"Canvas please enter password: </TextBox> </Canvas> </Grid>Copy the code