I started as a relatively conflict WPF, because fewer people use it. Application forms are capable of feeling and Winform What is the difference. But I was wrong, very grateful to my instructor, I recommend shoved Tie "WPF layman's language", I learned WPF charm - data-driven UI.
So, so good frame, I wanted to write down, WPF developer know very little, so that most of the tutorials are video 10 years ago. I record, not for what is really like WPF, the kind of "weird without" feeling.
A, UI layout
saying goes: "People rely on clothes horse saddle,"
What does it mean? Meaning people dressed in good clothes, will it very spirit; prepare an emphasis on horse saddle, it will be very special, Chun Mei. This means nothing the United States have a great impact on the image of the human body. From "Rengui Seiji"
So we put that in the introduction to WPF
WPF as a dedicated user interface technology, functional layout is one of its core functions. User-friendly interface and a good user experience is inseparable from the well-designed layout.
WPF designer workload biggest part is both layout and animation, layout is static, dynamic animation, user-generated user experience is felt when interacting with the software functionality in this movement.
In other words, the layout is WPF clothes!
Second, the controls
, "I am old career gull water dependent, he hung an old romantic plug shortage vote."
Means that wildlife and wild gull water dependent, can not be separated
so to do in WPF? A page layout, display. It is composed of one control. WPF controls are inseparable from the survival of the environment, they formed a vivid picture of beautiful pieces (layout).
Before you start to learn the layout of these elements, we need to know the layout of each element has its own characteristics, we have to be flexible to use. Do not refrain from doing their utmost to be a reasonable match.
(Just like the environment, to be a reasonable match, otherwise there will be "biological invasion" "gained nothing loss to rice" behavior, increased the burden on the ecological environment. This damage)
1, classification controls
Roughly speaking, daily work we deal with the most control is nothing less than six categories, namely:
1, the layout of controls: receiving a plurality of control or may be other layout controls nested, and arranged for tissue UI controls, such as: the StackPanel, the Grid, the Dock, the WrapPanel ,, the Canvas;
2, the contents of control: control can only accommodate one other or layout control as its content, such as: the Button, the Window;
. 3, the content control with a title: the equivalent of a content control, but can add a title, such as: Group Box, the TabItem;
. 4, the entry control: to display a data , this same type of column data in general. As the ListBox, the ComboBox;
. 5, with a title entry controls: control entry corresponds to one plus a title display region, such as: TreeViewItem, MenuItem, often used to display hierarchical data;
6, special content control: receiving of such TextBox string, TeztBlock can be freely controlled receiving text format, image receiving image data types such ...... relatively independent control.
As for why such a classification does, in fact, we only need to feel for it, will understand. It is not, you dragged from the toolbar out, looked at it like, looking at me. "? What you do not know," Death of ....................................
good, we do not do too much detail these controls, we introduce the layout of the controls, I believe other properties can refer to the following:
WPF basic controls use introduction: blog.csdn.net/niewq/artic...
Third, the layout of the controls
well, finally we came to a focus. WPF provides us with 5 layout, their characteristics are different, can be nested within each other, let us know about it.
1, Grid: list layout
2, StackPanel: Stack panel layout
3, WrapPanel: flow layout panel (when the element horizontally aligned, the content exceeds the width of the wrap; when the element vertical alignment, the content exceeds the height, wrap column)
4, DockPanel: docked panel
5, Canvas: coordinate panel
1, Grid list layout
word Grid translated as "grid; the grid, grid,"
Yes, it's like a grid, like our pages into one and one.
We are placed in the form of two TextBlock and two TextBox, want to achieve the style login window, but do not enter Italy, they are superimposed together.
Why are overlapped together it?
Because we did not do this container-related adjustments to the Grid, he is now a line of a "big grid." In an overlap each course, unless the property to set Magin, of course, this is not the effect we want to achieve.
So, we set up by
列<Grid.ColumnDefinitions></Grid.ColumnDefinitions>
行<Grid.RowDefinitions></Grid.RowDefinitions>
"Split Grid"
we can add ColumnDefinitions RowDefinitions nodes and nodes to determine our "Grid is divided into several grid."
As shown, the grid is divided into four:
By looking at the design window, we will find, Grid lines are divided become four:
Ugh? Not ah, why do we control also overlap it? Because we do not have to set them in which the lattice, then download, we set out.
Determining a position, a merge
when the container is in our Grid layout container, will add additional properties:
Row location: Grid.Row = "0"
column Location: Grid.Column = "0"
The default is not set, a value of 0, thus giving rise to the overlap to adjust our position.
Well, everything is back to normal, an increase of a button, how can not login button it!
By setting
Cell lines were combined: Grid.RowSpan = "1"
column of cells were combined: Grid.ColumnSpan = "1"
The default value of 1 bit, merge several write a few.
After minor modifications, our interface has become such:
Amount ...... looks a bit ugly, we add some attributes to adjust,
set the width and height
us to set the Width of ColumnDefinition RowDefinition wide and Height to set the high
Width and Height pixel support, proportion, and adaptive
Pixels: can be represented by a digital direct
proportion: in units * do
adaptation: auto-bit set value
Well, let's apply the above knowledge, adjust our view:
Summary
Well, we summarize the above width and height:
We first column of the line by the Grid scale setting 1: 3 ( 3 ), when we pulled form size, will find that their size is proportional changes.
Secondly, the line of Grid setting up both a fixed height, we can see that no matter how they change the height of the form is constant.
The last line sets the adaptive, I deliberately set the height of the button 100, we can also see the last line of the table is 100, you can know is based on content from the auto adaptation.
2, StackPanel stack panel
everybody to "stack" the two words are not familiar with it, as if the container stack panel in the "queue", we put under the Window Grid transposition StackPanel, come to experience it.
Set direction
We placed a lot of buttons StackPanel inside, they found the same line as, one by one, in the horizontal direction. If you do not like it, of course, you can change the direction of it!
By setting Orientation
Horizontal alignment: Orientation = "Horizontal"
vertical alignment: Orientation = "Vertical" (default)
For internal element itself, its alignment can be selected
HorizontalAlignment=“left” Center,right
VerticalAlignment=“Top” Bottom,Center,Stretch
3, WrapPanel flow layout
aligned when the element level, when the content exceeds the width, wrap; vertically aligned when the element contents exceed the height, wrap column)
it looks like the above and may, in fact, is not the same. When the number of sub-elements inside StackPanel exceeds a width (height) of the form overflow, flows layout automatically wrap. Used to generate dynamic data.
This is not described in detail, and the above properties are the same.
4, DockPanel dock layout
done winfrom develop friends, know a Docl attribute it, then our Dock layout is the reason, we have to practice it.
Controls DockPanel containers, it will add an additional attribute DockPanel.Dock
DockPanel.Dock=“Top”
DockPanel.Dock=“Bottom”
DockPanel.Dock=“Left”
DockPanel.Dock=“Right”
They are parked up and down, to note that the controls will be set with the order, have a different width and height (or size), default last docked controls the size of the accounts of all the remaining interface
A close look at the left and right, you'll know what I said attention items, new controls dock area accounted for all the remaining pages.
5, Canvas coordinate layout
Well, this is really the equivalent of winform layout, and set the coordinates to determine the position of the control.
Control in the Canvas container, it will add additional properties
https://www.jianshu.com/p/577f1d15c9e0
http://www.jianshu.com/u/fa86f3cdaa11
From the top of the window: Canvas.Top = "20"
from the left window: Canvas.Left = "100"
from the bottom of the window: Canvas.Bottom = "20"
from the right of the window: Canvas.Right = "0"
Fourth, the comprehensive mini case
if have read, we do a little case of it.
<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">新建StackPanel</Button>
<Button Height="50">保存StackPanel</Button>
<Button Height="50">增加StackPanel</Button>
<Button Height="50">导入StackPanel</Button>
<Button Height="50">导出StackPanel</Button>
<Button Height="50">关闭StackPanel</Button>
</StackPanel>
<DockPanel Grid.Row="0" Grid.Column="1">
<TextBlock DockPanel.Dock="Top" HorizontalAlignment="Center">我是DockPanel</TextBlock>
<WrapPanel>
<Button Width="200">WrapPanel</Button>
<Button Width="200">WrapPanel</Button>
<Button Width="200">WrapPanel</Button>
<Button Width="200">放不下啦WrapPanel</Button>
<Button Width="200">WrapPanel</Button>
</WrapPanel>
</DockPanel>
<Canvas Grid.Row="1" Grid.Column="1">
<TextBlock Canvas.Top="100" Canvas.Left="100">Canvas账号：</TextBlock>
<TextBox Canvas.Top="100" Canvas.Left="200">Canvas请输入账号：</TextBox>
<TextBlock Canvas.Top="130" Canvas.Left="100">Canvas密码：</TextBlock>
<TextBox Canvas.Top="130" Canvas.Left="200">Canvas请输入密码：</TextBox>
</Canvas>
</Grid>
