1

何が間違っているのか理解できません。2列3行のグリッドがあります。左側の列には、テキストブロックとテキストボックス、およびすべて適切なリストボックスがあります。

右の列は、開始するタブコントロールがある場合、もう少し複雑になります。次に、TabItemとその中にメイングリッドがあり、その中に2つのグリッドがあります。grdDetailsTop、次にgrdDetailsBottomです。

grdDetailsTopには3つの列があり、左側は境界線のある画像で、中央はメンバーコード：'TextBox'で、その下はファミリーコード：'TextBox'で、最後にその下にBalance：'TextBox'を配置します。

私が試した方法は、グループボックスを配置した最初の列に3列のgrdDetailsTopグリッドがあり、その中にスタックパネルがあります。

2番目の列は、Horizo​​ntalとgrid.Column = "1"の向きでStackpanelを配置するのに問題がある場所ですが、テキストブロックも3番目の列に入ります。悪い説明で申し訳ありませんが、コードはうまくいけばあなたが助けることができるように投稿されています。また、パネルが異なる理由は、grdDetailsTopの各列の周囲に境界線を配置できるようにするためです。

ありがとう

    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20*"></ColumnDefinition>
            <ColumnDefinition Width="70*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"></RowDefinition>
            <RowDefinition Height="5*"></RowDefinition>
            <RowDefinition Height="100*"></RowDefinition>
        </Grid.RowDefinitions>

            <TextBlock Text="Search Member" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20"></TextBlock>
            <TextBlock Text="Member Details" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20"></TextBlock>
            <TextBox Name="txtMEMSearch" Background="Orange" Grid.Column="0" Grid.Row="1"></TextBox>
            <ListBox Name="lstSearchMembers" Grid.Row="2"
                     BorderBrush="Black" DisplayMemberPath="Name"
                     ItemsSource="{Binding ElementName=bindingToObject,
                                           Path=Clients}" />


        <TabControl Name="mainTabControl" Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Margin="5">
            <TabItem Header="Member Details" Name="memDetailTab">
                <Grid Name="mainTabGrid">
                    <Grid Name="grdDetailsTop" Height="175" VerticalAlignment="Top">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="150"></ColumnDefinition>
                            <ColumnDefinition Width="200"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>

                        <GroupBox Header="Picture">
                            <StackPanel>
                                <Image Height="125" Width="125"></Image>
                            </StackPanel>
                        </GroupBox>


*************PROBLEM AREA******************

                        <StackPanel Margin="5" MaxWidth="200" Orientation="Horizontal" Grid.Column="1">
                            <TextBlock
                                VerticalAlignment="Top"
                                Margin="5"
                                Height="25">Member Code:</TextBlock>
                            <TextBlock
                                VerticalAlignment="Top"
                                Margin="5"
                                Width="75"
                                Height="25"></TextBlock>

                            <TextBlock
                                Margin="5"
                                Height="25"
                                Width="100">Family Code:</TextBlock>

                            <TextBlock
                                Margin="5"
                                Width="75"
                                Height="25"></TextBlock>

                            <TextBlock
                                VerticalAlignment="Bottom"
                                Margin="5"
                                Height="25"
                                Width="100">Balance Due:</TextBlock>

                            <TextBlock
                                Margin="5"
                                VerticalAlignment="Bottom"
                                Width="75"
                                Height="25"></TextBlock>
                        </StackPanel>  

******************************************                                                   
                    </Grid>

                    <Grid Name="grdDetailsBottom">                   
                    </Grid>                  
                </Grid>
          </TabItem>
        </TabControl>         
    </Grid>
</Page>

スクリーンショット

4

1 に答える 1

1

あなたはそのVerticalAlignment = "Top"上に欠けているTextBlockので、それはデフォルトでStretch利用可能な垂直スペースのテキストを中央に配置します。TextBoxesそのプロパティを設定すると、同じ内の他のプロパティと一致するように上に移動することがわかりますStackPanel。

それは実際にTextBoxは次の列に移動するのではなく、それが含まれる列の固定幅（この場合、幅200の列1）を定義しました。ただし、その列の内容（StackPanel幅は200単位を超えるため、次のグリッド列にプッシュされます。すべてTextBoxesを列1に保持するには、列を広げて収まるようにするか、サイズを縮小する必要があります。またはのTextBoxes幅Autoを設定して、内容に合わせて自動的にサイズを調整します。これを見ると、TextBlocks2と3で175ユニットを占めており、残りの部分は25ユニットしか残ってTextBlocksいStackPanelません。十分ではありません。スペース。

<StackPanel Margin="5" MaxWidth="200" Orientation="Horizontal" Grid.Column="1">
  <TextBlock VerticalAlignment="Top" Margin="5" Height="25">Member Code:</TextBlock>
  <TextBlock VerticalAlignment="Top" Margin="5" Width="75" Height="25"></TextBlock>
  <TextBlock VerticalAlignment="Top" Margin="5" Height="25" Width="100">Family Code:</TextBlock>
  ... other text boxes ...
</StackPanel>

これにより、垂直レイアウトの問題は修正されますが、水平レイアウトの問題は修正されません。そのためには、グリッド列のサイズまたはコンテンツのサイズを変更する必要があります。

WrapPanel以下のコメントによると、スペースが足りなくなったときにアイテムを次の行（水平または垂直）に自動的に折り返すものを探していると思います。

<WrapPanel Margin="5" MaxWidth="200" Orientation="Horizontal" Grid.Column="1">
  <TextBlock VerticalAlignment="Top" Margin="5" Height="25">Member Code:</TextBlock>
  <TextBlock VerticalAlignment="Top" Margin="5" Width="75" Height="25"></TextBlock>
  <TextBlock VerticalAlignment="Top" Margin="5" Height="25" Width="100">Family Code:</TextBlock>
  ... other text boxes ...
</WrapPanel>

このレイアウトは確かに見栄えがします。ただし、具体的な要件はわかりませんが、WrapPanelマージンとサイズが固定されたwithを使用するのではなく、 GridwithColumnDefinitionsとを使用RowDefinitionsしてこのタイプのレイアウトでアイテムを整理することをお勧めします。はGrid、はるかに高いレベルの柔軟性を提供し、システムのフォントサイズに基づいてアイテムのサイズを自動的に変更したり、ユーザーがビューのサイズを変更したり、その他の要素を制御できないようにします。固定の高さ/幅を設定している場合、その柔軟性は失われます。繰り返しになりますが、あなたが要件であるかどうかはわかりません。おそらくこれが最善の解決策ですが、ほとんどの場合、代わりに使用することを強くお勧めしGridます。

于 2013-03-02T19:35:56.923 に答える