WrapPanelのWPFのレイアウト

WrapPanelのWPFのレイアウト

开发工具与关键技术:Visual Studio 2015、WPF
作者:黄元进
撰写时间:2019年4月14日

十分な長さ又は高さ調整が自動的に上から下へ、または右から左へ順序付け順序に従って、ラップ右、左から行または列に列挙された順序で各パネルのWrapPanel空間配置。コンテンツOrientation--ラップ。
、垂直:要素は左から右へ、その後ラップから下方から配置されています。
図1、図2のように垂直効果は非常にダウン効果自体が結果を見るために高い幅を形成引っ張ることができるです。
ここに画像を挿入説明
ここに画像を挿入説明

達成するためのXAMLコードを使用します:

<Window x:Class="WrapPanel面板.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <!--Vertical:元素是从上向下排列的,然后从左至右自动换行-->
    <WrapPanel Orientation="Vertical">
        <Button Width="100">1</Button>
        <Button Width="100">2</Button>
        <Button Width="100">3</Button>
        <Button Width="100">4</Button>
        <Button Width="100">5</Button>
        <Button Width="100">6</Button>
        <Button Width="100">7</Button>
        <Button Width="100">8</Button>
        <Button Width="100">9</Button>
        <Button Width="100">10</Button>
        <Button Width="100">11</Button>
        <Button Width="100">12</Button>
        <Button Width="100">13</Button>
        <Button Width="100">14</Button>
    </WrapPanel>
</Window>

二、水平:要素はその後、上から下のラップに、左から右に配置されています。
図1に示す水平効果図、図2は、ドローダウン効果の幅である、あなたは結果を確認するために、高い幅を形成身を引くことができます。
ここに画像を挿入説明
ここに画像を挿入説明

達成するためのXAMLコードを使用します:


<Window x:Class="WrapPanel面板.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <!--Horizontal:元素是从左向右排列的,然后自上至下自动换行。-->
    <WrapPanel Orientation="Horizontal">
        <Button Width="100">1</Button>
        <Button Width="100">2</Button>
        <Button Width="100">3</Button>
        <Button Width="100">4</Button>
        <Button Width="100">5</Button>
        <Button Width="100">6</Button>
        <Button Width="100">7</Button>
        <Button Width="100">8</Button>
        <Button Width="100">9</Button>
        <Button Width="100">10</Button>
        <Button Width="100">11</Button>
    </WrapPanel>	
</Window>

おすすめ

転載: blog.csdn.net/weixin_44547949/article/details/89338295