我们可以在窗口上使用多xaml布局吗?

时间:2018-10-17 04:01:20

标签: wpf xaml stretch

我认为我们可以在具有XAML的Windows上使用多重布局。 所以我尝试创建一个像这样的窗口: 我想在左侧创建一个ListView,它可以调整大小。左侧的网格和文本框将适合右侧网格。 我试图使用其他布局,StackPanel,DockPanel。 如何创建可调整大小的网格

    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <ToolBar Name="toolBar" Grid.Row="0">
        <Button Name="btnLoad" Width="Auto" Height="25" ToolTip= Click="btnLoad_Click" VerticalAlignment="Bottom">
            <StackPanel Orientation="Horizontal">
                <Image Source="Resources/reload.png" Width="16" Height="16" HorizontalAlignment="Left" Margin="0 0 5 0"/>
                <TextBlock>Load/Reload</TextBlock>
            </StackPanel>
        </Button>
        <Button Name="btnSave" Width="Auto" Height="25"  Click="btnSave_Click">
            <StackPanel Orientation="Horizontal">
                <Image Source="Resources/save.png" Width="16" Height="16" HorizontalAlignment="Left" Margin="0 0 5 0"/>
                <TextBlock>Save</TextBlock>
            </StackPanel>
        </Button>
    </ToolBar>
    <ComboBox Name="cbTypeOfShop" Grid.Row="1" Margin="5 5 5 5"/>
    <Grid Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ListView Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
        <GridSplitter Grid.Column="1" Grid.RowSpan="3" HorizontalAlignment="Left" VerticalAlignment="Stretch" Background="Black" ShowsPreview="true" Width="5"/>
        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="2">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <DataGrid Name="dtgListItem" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

            </DataGrid>
            <TextBox Grid.Row="1" Height="100" TextWrapping="Wrap" AcceptsReturn="True" Text="1231231231 22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222221231231231231231123123123123123123123123123123123123123123123123123" />
        </Grid>
    </Grid>
    <StatusBar Grid.Row="3" Height="25" HorizontalAlignment="Stretch">
        <TextBlock Name="abc">abc</TextBlock>
    </StatusBar>
</Grid>

I need that the datagrid at left will be resize and fit on grid cell when I use the gridsplitter.

但是当我调整左侧尺寸时。

But when I resize the left side.

1 个答案:

答案 0 :(得分:5)

尝试

    <Grid>
           <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="5" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
            <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
            <TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
</Grid>

如您所见,我只是创建了一个网格,该网格具有两列相等的宽度,中间有一个5像素的列。

enter image description here