2016-06-17 104 views
-1

我必須承認,在這一點上,我實際上並不知道我是否以正確的方式去做這件事,但如果堅持下去,我將學習所需的原則。我會堅持這個問題。堆棧面板不自動拉伸

這裏是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> 

正如你所看到的,它有一個分離器。當我拖累了分流:

​​

它不表現爲我打算。理想情況下,紅色堆疊面板會向右移動。它總是與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

對於那些有興趣:

<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>