none
WPF Grid verteilt Inhalte gleichmäßig, statt alles am oberen Element bündig zu setzten RRS feed

  • Frage

  • Hallo,

    ich habe ein Grid mit 8 Zeilen und 5 Spalten.
    In der Zelle Grid.Row="1" Grid.Coloumn="0" fasse ich 7 Zeilen zusammen mit Grid.RowSpan="7",
    dort befindet sich ein StackPanel und darin u.A. ein DataGrid.
    In den Spalten Grid.Coloumn="2" und ="4" habe ich auf jeder Zeile Element wie TextBox, Label, TextBlock und Button.
    Der Inhalt des DataGrid ist höher als die Zeilen rechts daneben (alle oben aufgezählten Elemente zusammen).
    Nun werden die Elemente recht auseinandergezogen und vertikal gleichmässig verteilt, was echt nicht gut aussieht.

    Was ich versucht habe ist z.B. allen Zeilen eine feste Höhe zu geben und der untersten Height="auto",
    VerticalAlignment="Top", ..

    Warum? Wie kann ich alle Elemente oben (direkt untereinander) anordnen lassen?

    so sieht es aus:


    www.mehlhop.com

    Dienstag, 18. Februar 2014 15:20

Antworten

  • Ich muss mich nochmal leicht korrigieren, die letzte Zeile muss auf * stehen:

    <Grid.RowDefinitions>
        <RowDefinition Height="auto" Name="rowTop"/>
        <RowDefinition Height="auto" Name="row1" />
        <RowDefinition Height="auto" Name="row2"  />
        <RowDefinition Height="auto" Name="row3" />
        <RowDefinition Height="auto" Name="row4" />
        <RowDefinition Height="auto" Name="row5" />
        <RowDefinition Height="auto" Name="row6" />
        <RowDefinition Height="*" Name="row7" />
    </Grid.RowDefinitions>

    Da sich sonst anscheinend alle Rows wie Height="*" verhalten.

    PS: Eventuell musst du eine weitere Zeile einfügen und nur diese (row8) hat dann eine Höhe von *, die Anderen alle Auto. Dadurch würde jedes Control minimal groß sein. Den Datagridcontainer musst du natürlich eine Zeile weiter strecken.


    Koopakiller [kuːpakɪllɐ] (Tom Lambert)
    Webseite | Code Beispiele | Facebook | Twitter | Snippets   C# ↔ VB.NET Konverter
    Markiert bitte beantwortende Posts als Antwort und bewertet Beiträge. Danke.


    Dienstag, 18. Februar 2014 16:04
    Moderator

Alle Antworten

  • Hallo,
    Das Grundgerüst im XAML zu zeigen wäre wahrscheinlich einfacher zu verstehen ;)

    Versuche mal alle Zeilenhöhen auf Auto zu setzen, so werden die nur so groß wie maximal nötig. Die letzte Zeile wird dann den restlichen Platz ausfüllen. Denn momentan scheint es, als hättest du * als Höhe angegeben. Dadurch werden natürlich alle gleich hoch und die Alignments können daran kaum etwas ändern.


    Koopakiller [kuːpakɪllɐ] (Tom Lambert)
    Webseite | Code Beispiele | Facebook | Twitter | Snippets   C# ↔ VB.NET Konverter
    Markiert bitte beantwortende Posts als Antwort und bewertet Beiträge. Danke.

    Dienstag, 18. Februar 2014 15:25
    Moderator
  • ne, die Höhen standen zuvor auf feste Werte.
    Auch mit auto funktioniert es nicht.

    hier die xaml...

     <ScrollViewer Name="scr" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"  >
            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" Name="rowTop"/>
                    <RowDefinition Height="auto" Name="row1" />
                    <RowDefinition Height="auto" Name="row2"  />
                    <RowDefinition Height="auto" Name="row3" />
                    <RowDefinition Height="auto" Name="row4" />
                    <RowDefinition Height="auto" Name="row5" />
                    <RowDefinition Height="auto" Name="row6" />
                    <RowDefinition Height="auto" Name="row7" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="30" />
                    <ColumnDefinition Width="210" Name="col2" />
                    <ColumnDefinition Width="30" Name="col3" />
                    <ColumnDefinition Width="210" />
                </Grid.ColumnDefinitions>
                <Label Content="List of kitplates" FontWeight="Bold" />
                <Label Grid.Column="2" Content="Data of origin" FontWeight="Bold" />
                <Label Grid.Column="4" Content="Data of copy" FontWeight="Bold" Name="lblCopyHeader" />
    
                <StackPanel Grid.Row="1" Grid.RowSpan="7"  Orientation="Vertical" Margin="0,12,0,0" >
                    <Label Name="lblInfoDrgCopyKitplate" Visibility="Collapsed" Foreground="Red" FontWeight="Bold" />
                    <ScrollViewer Name="scrGrid" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Hidden" >
                        <Border Name="brd" BorderThickness="1" BorderBrush="Black">
                            <DataGrid Name="dgrCopyKitplate" 
                            HorizontalAlignment="Left" AutoGenerateColumns="True"                      
                            MaxColumnWidth="400" MinColumnWidth="200"
                            RowHeaderWidth="20"
                            CanUserAddRows="False" CanUserDeleteRows="False" CanUserResizeRows="True"                     
                            CanUserResizeColumns="True" CanUserReorderColumns="True" CanUserSortColumns="true" 
                            HeadersVisibility="None"
                            IsReadOnly="True"
                            SelectionMode="Single"
                            SelectionUnit="FullRow" 
                            AlternatingRowBackground="AliceBlue" 
                            BorderThickness="0"                      
                            ItemsSource="{Binding}"
                            SelectedCellsChanged="dgrCopyKitplate_SelectedCellsChanged"
                            Loaded="dgrCopyKitplate_Loaded" />
                            <!--                        PreviewKeyDown="dgrCopyKitplate_PreviewKeyDown" -->
                        </Border>
                    </ScrollViewer>
                </StackPanel>
    
                <Label Grid.Row="1" Grid.Column="2" Content="name" />
                <Label Grid.Row="1" Grid.Column="4" Content="name" />
                <TextBox Grid.Row="2" Grid.Column="2" Name="tboNameOrigin" IsEnabled="False" />
                <TextBox Grid.Row="2" Grid.Column="4" Name="tboNameCopy" TextChanged="tboNameCopy_TextChanged" />
    
                <Label Grid.Row="3" Grid.Column="2" Content="description" />
                <Label Grid.Row="3" Grid.Column="4" Content="description" />
                <TextBox Grid.Row="4" Grid.Column="2" Name="tboDescriptionOrigin" IsEnabled="False"  Height="124" TextWrapping="Wrap" VerticalContentAlignment="Top" VerticalAlignment="Top"/>
                <TextBox Grid.Row="4" Grid.Column="4" Name="tboDescriptionCopy"  Height="124" TextWrapping="Wrap" VerticalContentAlignment="Top" VerticalAlignment="Top"/>
    
                <Label Grid.Row="5" Grid.Column="2" Content="creator" />
                <Label Grid.Row="5" Grid.Column="4" Content="creator" />
                <TextBox Grid.Row="6" Grid.Column="2" Name="tboCreatorOrigin" IsEnabled="False" />
                <TextBox Grid.Row="6" Grid.Column="4" Name="tboCreatorCopy" IsEnabled="False" />
    
                <TextBlock Grid.Row="7" Grid.Column="2" Grid.ColumnSpan="2" Name="lblInfoName" Foreground="Red" FontWeight="Bold" Margin="0,12,0,0" TextWrapping="Wrap" />
    
                <Button Grid.Row="7" Grid.Column="4" Name="btnOK" Click="btnOk_Click" HorizontalAlignment="Right" IsEnabled="False" >
                    <StackPanel Orientation="Horizontal">
                        <Image Source="../Resources/yes.png" />
                        <Label Name="lblOK" Content="OK" />
                    </StackPanel>
                </Button>
            </Grid>
        </ScrollViewer>


    www.mehlhop.com

    Dienstag, 18. Februar 2014 15:57
  • Ich muss mich nochmal leicht korrigieren, die letzte Zeile muss auf * stehen:

    <Grid.RowDefinitions>
        <RowDefinition Height="auto" Name="rowTop"/>
        <RowDefinition Height="auto" Name="row1" />
        <RowDefinition Height="auto" Name="row2"  />
        <RowDefinition Height="auto" Name="row3" />
        <RowDefinition Height="auto" Name="row4" />
        <RowDefinition Height="auto" Name="row5" />
        <RowDefinition Height="auto" Name="row6" />
        <RowDefinition Height="*" Name="row7" />
    </Grid.RowDefinitions>

    Da sich sonst anscheinend alle Rows wie Height="*" verhalten.

    PS: Eventuell musst du eine weitere Zeile einfügen und nur diese (row8) hat dann eine Höhe von *, die Anderen alle Auto. Dadurch würde jedes Control minimal groß sein. Den Datagridcontainer musst du natürlich eine Zeile weiter strecken.


    Koopakiller [kuːpakɪllɐ] (Tom Lambert)
    Webseite | Code Beispiele | Facebook | Twitter | Snippets   C# ↔ VB.NET Konverter
    Markiert bitte beantwortende Posts als Antwort und bewertet Beiträge. Danke.


    Dienstag, 18. Februar 2014 16:04
    Moderator
  • Ja! :-)

    Danke!


    www.mehlhop.com

    Mittwoch, 19. Februar 2014 09:54