WPFのレイアウトの実装

測定：すべての子要素を介して容器、サブ要素と希望のサイズを尋ねました
配置：位置子要素に配置された容器、最終的なサイズを設定して

高さ、幅：所望の大きさの要素

Actualheight、Actualwidth：実際のサイズ

レイアウト継承メカニズム

DispatherObject：WPFアフィニティーシングルスレッドアプリケーションモード、各ユーザインターフェースは、単一のスレッドによって使用されています。

DependebcyObject：依存関係プロパティ、Winフォームコントロールに、コントロールは通常ので、リソース、依存関係プロパティの廃棄物は、この問題を解決することで、デフォルトの初期値によって保存され、デフォルトでのみ維持属性

ビジュアル：ビジュアル継承視覚的要素は、命令と追加の詳細を描く包装グラフィックスのこのタイプを（インターフェイス要素上で見ることができます）

UIElement：可視化機関に追加する多くの機能：入力フォーカスなど

FrameworkElementの：のUIElementを強化

パネル：基底クラスの元Shuレイアウトは、すべてのレイアウト要素は、導出されます

レイアウトプロパティ

そのサイズにレイアウトコンテナ内のサブ要素、位置は、いくつかの裁量権を有し、それらの位置を調整するために、自身のサブエレメントのレイアウトプロパティを設定することができます

たHorizontalAlignment	水平方向の配置
VerticalAlignmentを	垂直の道
エドムンド	マージン（コントロールを囲むギャップ）
minWidth / minHeightプロパティ	最小寸法（幅/高さ）
MaxWidthプロパティ/ MaxHeightの	最大サイズ（幅/高さ）
幅高さ	アプリケーションのサイズ（幅/高さ）

グリッドレイアウトテーブル

テーブルレイアウトは、子コントロールは、テーブルのレイアウト配置と同じになります。

    <Grid>

　　　　　　<Grid.RowDefinitions>

            <RowDefinition Height="1*"/>

            <RowDefinition Height="1*"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="1*"/>

            <ColumnDefinition Width="1*"/>

        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.Column="0" Content="1" />

        <Button Grid.Row="0" Grid.Column="1" Content="2"/>

        <Button Grid.Row="1" Grid.Column="0" Content="3"/>

        <Button Grid.Row="1" Grid.Column="1" Content="4"/>
    </Grid>

将布局分为两行两列，效果如图

RowDefinition--->行，ColumnDefinitions-->列。

Height="*",Width="*" 表示自适应行列的高宽，也可以设定固定高宽Height=“30”

“*”通配符 “*”与“1*”表示不同的意思，“*”表示剩余的全部，“1*”表示自适应一份，“2*”表示自适应比列的两份。

当前行列自适应也可以写成 Height=“Auto”，width=“Auto”

Grid.Row="" 第几行 Grid.Column=""第几列

Grid跨行跨列

当Gird内的元素跨越多行或者多列的时候，可以使用RowSpan或者ColumnSpan实现

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Content="1" Grid.RowSpan="2" />
        <Button Grid.Row="0" Grid.Column="1" Content="2"/>
        <Button Grid.Row="1" Grid.Column="1" Content="4" Grid.RowSpan="2" />
    </Grid>

GridSpliter 分割串口

通过拖动的方式改变窗口内部区域的大小，再增加行或列的同是，减少其他行列的大小（窗口的区域的大小的固定的）

共享尺寸

当有多个子控件时，假日要设置子控件的行高保持一致，一个控件的行高发生变化，另一个子控件也会跟着改变

    <Grid Grid.IsSharedSizeScope="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid ShowGridLines="True">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" SharedSizeGroup="ShareSize"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Button Content="ShareSize" Height="100"/>
        </Grid>
        <Grid ShowGridLines="True" Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" SharedSizeGroup="ShareSize"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Button Content="ShareSize" />
        </Grid>
    </Grid>

1.设置Grid Grid.IsSharedSizeScope="True"

2.共享子控件进行分组 SharedSizeGroup="ShareSize"

UniformGrid 均衡表格

不同Grid需要设置复杂的设置，只把元素平均放到界面上

    <UniformGrid Rows="2" Columns="2">
        <Button Content="0.0"/>
        <Button Content="0.1"/>
        <Button Content="1.0"/>
        <Button Content="1.1"/>
    </UniformGrid>

Rows=“” ：行，Colums=“”：列

Canvas布局

画布，用于控制每个元素的精确位置，将元素直接放到指定位置。Canvas是窗口元素，用户改变窗口元素是，Canvas的也会随着改变，子元素的位置也会移动，从而保证Canvas的位置属性不变

Canvas运行子控件超过其边界，默认不会剪裁子元素，同时可以使用负坐标，因此画布不需要指定大小。如果想复制画布内容，将ClipToBounds设为true即可。

Canva.left,Canvas.Top,Canvas.Bottom,Canvas.Right，四个属性设置Canvas中元素的位置。

Z轴排序

当两个元素重叠时，可以通过Z轴排序，让元素显示在最上层使用Zindex属性，Panel.ZIndex大的就显示在最顶层

    <Canvas>
        <Button Content="ZINDEX1" Height="100" Width="100" Canvas.Left="100" Panel.ZIndex="2" />
        <Button Content="ZINDEX2" Height="100" Width="100" Canvas.Left="180"  Canvas.Top="40" Background="Red" Panel.ZIndex="1"/>
    </Canvas>

Dockpanel 停靠面板

可以将面板的某一边给指定的元素，当面板的大小变化时，会根据指定的边进行停靠。在Docakpanel，指定停靠边的元素，会根据定义的顺序占领边角，不会重复。并且最好一个控件会填充剩余的面板，如不全部填充设置lastChildFill这是False

    <DockPanel>
        <Button Content="Top" DockPanel.Dock="Top"/>
        <Button Content="Bottom" DockPanel.Dock="Bottom"/>
        <Button Content="Left" DockPanel.Dock="Left"/>
        <Button Content="Right" DockPanel.Dock="Right"/>
        <Button Content="Content"/>
    </DockPanel>

DockPanel.Dock="" :为元素选择指定的边

Viewbox 视图框

　　视图框可以将放入其中的内容，自动缩放，从而使控件不超出指定大小，并且原来指定的长宽不起作用，仅保留长宽的比例。

禁用自动缩放 stretch 设置为None

保留缩放但不保留子元素比例：将Viewbox默认的stretch为uniform改为fill

保留比例并且完全填充空白区域：stretch设置为UniformToFill

    <StackPanel>
        <Viewbox Width="100" Height="200" Stretch="Uniform">
            <Button Height="100" Width="200" Background="Black"/>
        </Viewbox>
        <Viewbox Width="100" Height="200"  Stretch="UniformToFill">
            <Button Height="100" Width="200" Background="Blue"/>
        </Viewbox>
        <Viewbox Stretch="Fill" Width="100" Height="200" >
            <Button Height="100" Width="200" Background="Orange"/>
        </Viewbox>
        <Viewbox  Stretch="None" Width="100" Height="200" >
            <Button Height="100" Width="200" Background="Red"/>
        </Viewbox>
    </StackPanel>

ScrollViewer 滚动视图控件

ScrollViewer可以将过多的内容通过一个可滚动的区域来显示，然后通过滚动条显示全部内容。HorizontalScrollBarVisibility横向滚动条，VerticalScrollBarVisibility垂直滚动条

    <Grid Height="600" Width="800">
        <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" >
            <Button Height="800" Width="1000" Background="Red" Content="ScrollViewer" FontSize="40"/>
        </ScrollViewer>
    </Grid>

WPFの学習の旅---ページレイアウト