堆叠面板不能自动拉伸

时间:2016-06-17 11:48:19

标签: wpf gridsplitter

我必须承认,在这一点上,我实际上并不知道我是否以正确的方式对此表示不满,但如果我坚持下去,我将学习所需的原则。我会坚持手头的问题。

这是WPF语法:

<Window x:Class="OCLMEditor.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:OCLMEditor"
        mc:Ignorable="d"
        Title="Christian Life and Ministry Editor" Height="517.366" Width="729.7">
    <Grid Margin="0,0,0,3">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition Width="50*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0" Grid.ColumnSpan="2">
            <Menu x:Name="menuOCLM">
                <MenuItem Header="File">
                    <MenuItem Header="Download Schedule Information"/>
                    <Separator/>
                    <MenuItem Header="Export Student Information"/>
                    <MenuItem Header="Import Student Information"/>
                    <Separator/>
                    <MenuItem Header="Page Setup"/>
                    <MenuItem Header="Print Preview"/>
                    <Separator/>
                    <MenuItem Header="Update Google Calendar"/>
                    <Separator/>
                    <MenuItem Header="Exit"/>
                </MenuItem>
                <MenuItem Header="Edit"/>
                <MenuItem Header="View"/>
                <MenuItem Header="Options"/>
                <MenuItem Header="Help"/>
            </Menu>
        </StackPanel>

        <DockPanel Grid.Row="1" Grid.Column="0" Background="Aqua">
            <StackPanel Orientation="Horizontal"  Margin="3">
                <StackPanel Background="Yellow" HorizontalAlignment="Stretch">
                    <Label>Week of Meeting:</Label>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="auto"/>
                        </Grid.ColumnDefinitions>
                        <ComboBox>
                            <ComboBoxItem>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="special_event.png"></Image>
                                    <Label>Date 1</Label>
                                </StackPanel>
                            </ComboBoxItem>
                            <ComboBoxItem>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="special_event.png"></Image>
                                    <Label>Date 2</Label>
                                </StackPanel>
                            </ComboBoxItem>
                            <ComboBoxItem>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="special_event.png"></Image>
                                    <Label>Date 3</Label>
                                </StackPanel>
                            </ComboBoxItem>
                        </ComboBox>
                        <Image Grid.Column="1" HorizontalAlignment="Right" Source="event_time.png" Margin="2"></Image>
                    </Grid>
                    <Label>Note:</Label>
                    <ComboBox IsEditable="True">
                        <ComboBoxItem>Sample Text</ComboBoxItem>
                    </ComboBox>
                    <Label>Bible Reading for Week:</Label>
                    <TextBox>PSALMS 60-68</TextBox>
                    <Label>Opening Song:</Label>
                    <ComboBox>
                        <ComboBoxItem>Song 1</ComboBoxItem>
                        <ComboBoxItem>Song 2</ComboBoxItem>
                        <ComboBoxItem>Song 3</ComboBoxItem>
                    </ComboBox>
                </StackPanel>
                <StackPanel Orientation="Vertical" Margin="10,0,0,0" Background="Red">
                    <Label>Chairman:</Label>
                    <ComboBox></ComboBox>
                    <Label>Auxiliary Counsellor 1:</Label>
                    <ComboBox></ComboBox>
                    <Label>Auxiliary Counsellor 2:</Label>
                    <ComboBox></ComboBox>
                    <Label>Prayer:</Label>
                    <ComboBox></ComboBox>
                </StackPanel>
            </StackPanel>
        </DockPanel>
        <WebBrowser Grid.Row="1" Grid.Column="1" x:Name="htmlView"></WebBrowser>
        <GridSplitter Width="5" Background="Chocolate">
            <Grid.Row>1</Grid.Row>
            <Grid.Column>0</Grid.Column>
        </GridSplitter>
    </Grid>

</Window>

如你所见,它有一个分离器。当我拖动分割器时:

Results after dragging

它没有按照我的意图行事。理想情况下,红色堆栈面板将向右移动。它总是与html视图相邻。黄色堆叠面板将拉伸以填充宽度。我已经尝试将垂直对齐设置为在各个地方拉伸,但它不起作用。它们总是保持这个固定的宽度。

更新:我尝试了几种不同的方法,最近是网格中的网格:

<Window x:Class="OCLMEditor.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:OCLMEditor"
        mc:Ignorable="d"
        Title="Christian Life and Ministry Editor" Height="517.366" Width="729.7">
    <Grid Margin="0,0,0,3">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition Width="50*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0" Grid.ColumnSpan="2">
            <Menu x:Name="menuOCLM" IsMainMenu="True">
                <MenuItem x:Name="menuFile" Header="File">
                    <MenuItem Header="Download Schedule Information"/>
                    <Separator/>
                    <MenuItem Header="Export Student Information"/>
                    <MenuItem Header="Import Student Information"/>
                    <Separator/>
                    <MenuItem x:Name="menuFilePageSetup" Header="Page Setup" Click="menuFilePageSetup_Click"/>
                    <MenuItem Header="Print Preview" Click="MenuItem_Click"/>
                    <Separator/>
                    <MenuItem Header="Update Google Calendar"/>
                    <Separator/>
                    <MenuItem Header="Exit"/>
                </MenuItem>
                <MenuItem x:Name="menuEdit" Header="Edit">
                    <MenuItem x:Name="menuViewCopy" Header="Copy" Click="menuViewCopy_Click"/>
                    <Separator/>
                    <MenuItem x:Name="menuViewSelectAll" Header="Select All" Click="menuViewSelectAll_Click"/>
                </MenuItem>
                <MenuItem Header="View"/>
                <MenuItem Header="Options"/>
                <MenuItem Header="Help"/>
            </Menu>
        </StackPanel>

        <DockPanel Grid.Row="1" Grid.Column="0">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"></ColumnDefinition>
                    <ColumnDefinition Width="10*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <StackPanel  Grid.Column="0" Background="Yellow" HorizontalAlignment="Stretch" Width="auto">
                    <Label>Week of Meeting:</Label>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="auto"/>
                        </Grid.ColumnDefinitions>
                        <ComboBox>
                            <ComboBoxItem>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="special_event.png"></Image>
                                    <Label>Date 1</Label>
                                </StackPanel>
                            </ComboBoxItem>
                            <ComboBoxItem>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="special_event.png"></Image>
                                    <Label>Date 2</Label>
                                </StackPanel>
                            </ComboBoxItem>
                            <ComboBoxItem>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="special_event.png"></Image>
                                    <Label>Date 3</Label>
                                </StackPanel>
                            </ComboBoxItem>
                        </ComboBox>
                        <Image Grid.Column="1" HorizontalAlignment="Right" Source="event_time.png" Margin="2"></Image>
                    </Grid>
                    <Label>Note:</Label>
                    <ComboBox IsEditable="True">
                        <ComboBoxItem>Sample Text</ComboBoxItem>
                    </ComboBox>
                    <Label>Bible Reading for Week:</Label>
                    <TextBox>PSALMS 60-68</TextBox>
                    <Label>Opening Song:</Label>
                    <ComboBox>
                        <ComboBoxItem>Song 1</ComboBoxItem>
                        <ComboBoxItem>Song 2</ComboBoxItem>
                        <ComboBoxItem>Song 3</ComboBoxItem>
                    </ComboBox>
                </StackPanel>
                <StackPanel Grid.Column="1" Orientation="Vertical" Margin="10,0,0,0" Background="Red">
                    <Label>Chairman:</Label>
                    <ComboBox></ComboBox>
                    <Label>Auxiliary Counsellor 1:</Label>
                    <ComboBox></ComboBox>
                    <Label>Auxiliary Counsellor 2:</Label>
                    <ComboBox></ComboBox>
                    <Label>Prayer:</Label>
                    <ComboBox></ComboBox>
                </StackPanel>
            </Grid>
        </DockPanel>
        <WindowsFormsHost x:Name="formsHost" Grid.Row="1" Grid.Column="1" />
        <GridSplitter Width="5" Background="Chocolate">
            <Grid.Row>1</Grid.Row>
            <Grid.Column>0</Grid.Column>
        </GridSplitter>
    </Grid>

</Window>

Updated Results

这是一项改进。但是我想填补这个空间的左栏。

我也尝试过内部的dockpanel,我仍然做错了。

谢谢。

1 个答案:

答案 0 :(得分:1)

对于那些感兴趣的人:

<Window x:Class="OCLMEditor.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:OCLMEditor"
        mc:Ignorable="d"
        Title="Christian Life and Ministry Editor" Height="517.366" Width="729.7">
    <Grid Margin="0,0,0,3">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition Width="50*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0" Grid.ColumnSpan="2">
            <Menu x:Name="menuOCLM" IsMainMenu="True">
                <MenuItem x:Name="menuFile" Header="File">
                    <MenuItem Header="Download Schedule Information"/>
                    <Separator/>
                    <MenuItem Header="Export Student Information"/>
                    <MenuItem Header="Import Student Information"/>
                    <Separator/>
                    <MenuItem x:Name="menuFilePageSetup" Header="Page Setup" Click="menuFilePageSetup_Click"/>
                    <MenuItem Header="Print Preview" Click="MenuItem_Click"/>
                    <Separator/>
                    <MenuItem Header="Update Google Calendar"/>
                    <Separator/>
                    <MenuItem Header="Exit"/>
                </MenuItem>
                <MenuItem x:Name="menuEdit" Header="Edit">
                    <MenuItem x:Name="menuViewCopy" Header="Copy" Click="menuViewCopy_Click"/>
                    <Separator/>
                    <MenuItem x:Name="menuViewSelectAll" Header="Select All" Click="menuViewSelectAll_Click"/>
                </MenuItem>
                <MenuItem Header="View"/>
                <MenuItem Header="Options"/>
                <MenuItem Header="Help"/>
            </Menu>
        </StackPanel>

        <DockPanel Grid.Row="1" Grid.Column="0">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="auto"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <StackPanel  Grid.Column="0" Background="Yellow" HorizontalAlignment="Stretch" Width="auto">
                    <Label>Week of Meeting:</Label>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="auto"/>
                        </Grid.ColumnDefinitions>
                        <ComboBox>
                            <ComboBoxItem>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="special_event.png"></Image>
                                    <Label>Date 1</Label>
                                </StackPanel>
                            </ComboBoxItem>
                            <ComboBoxItem>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="special_event.png"></Image>
                                    <Label>Date 2</Label>
                                </StackPanel>
                            </ComboBoxItem>
                            <ComboBoxItem>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="special_event.png"></Image>
                                    <Label>Date 3</Label>
                                </StackPanel>
                            </ComboBoxItem>
                        </ComboBox>
                        <Image Grid.Column="1" HorizontalAlignment="Right" Source="event_time.png" Margin="2"></Image>
                    </Grid>
                    <Label>Note:</Label>
                    <ComboBox IsEditable="True">
                        <ComboBoxItem>Sample Text</ComboBoxItem>
                    </ComboBox>
                    <Label>Bible Reading for Week:</Label>
                    <TextBox>PSALMS 60-68</TextBox>
                    <Label>Opening Song:</Label>
                    <ComboBox>
                        <ComboBoxItem>Song 1</ComboBoxItem>
                        <ComboBoxItem>Song 2</ComboBoxItem>
                        <ComboBoxItem>Song 3</ComboBoxItem>
                    </ComboBox>
                </StackPanel>
                <StackPanel Grid.Column="1" Orientation="Vertical" Margin="10,0,0,0" Background="Red">
                    <Label>Chairman:</Label>
                    <ComboBox></ComboBox>
                    <Label>Auxiliary Counsellor 1:</Label>
                    <ComboBox></ComboBox>
                    <Label>Auxiliary Counsellor 2:</Label>
                    <ComboBox></ComboBox>
                    <Label>Prayer:</Label>
                    <ComboBox></ComboBox>
                </StackPanel>
            </Grid>
        </DockPanel>
        <WindowsFormsHost x:Name="formsHost" Grid.Row="1" Grid.Column="1" />
        <GridSplitter Width="5" Background="Chocolate">
            <Grid.Row>1</Grid.Row>
            <Grid.Column>0</Grid.Column>
        </GridSplitter>
    </Grid>

</Window>

我必须使用网格并使列宽正确:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"></ColumnDefinition>
    <ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>