2016-06-17 17 views
-1

Ich muss gestehen, dass ich an dieser Stelle nicht wirklich weiß, ob ich über den richtigen Weg bin, aber wenn ich dabei bleibe, werde ich die notwendigen Prinzipien lernen. Ich bleibe bei dem Problem in der Hand.Stack Panels nicht Auto Stretching

Hier ist die WPF-Syntax:

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

Wie Sie sehen können, ist es ein Splitter hat. Wenn ich ziehen Sie den Splitter:

Results after dragging

Es verhält sich nicht wie ich gedacht. Idealerweise würde sich das rote Stapelfeld nach rechts verschieben. Es sollte immer neben der HTML-Ansicht sein. Die gelbe Stapelanzeige würde sich dehnen, um die Breite zu füllen. Ich habe versucht, die vertikale Ausrichtung an verschiedenen Stellen zu strecken und es funktioniert nicht. Sie bleiben immer auf dieser festen Breite.

Update: Ich habe verschiedene Ansätze versucht, teh neueste ein Gitter in einem Raster zu sein:

<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

Es ist eine Verbesserung. Aber es ist die linke Spalte, die ich den Raum ausfüllen möchte.

Ich habe auch versucht, mit einem Dockpanel im Inneren, wie Sie sehen können, und ich mache es immer noch falsch.

Vielen Dank.

Antwort

1

Für Interessenten:

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

ich ein Raster zu verwenden hatte und sich die Spaltenbreiten richtig:

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