0

次のレイアウトがあります

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="60" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
  </Grid.ColumnDefinitions>

  <Image Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Width="60" Height="60" />

  <StackPanel Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Orientation="Horizontal">
    <TextBlock Text="Title should be long" HorizontalAlignment="Left" />
    <Ellipse Fill="White" Stroke="White" Width="7" Height="7" />
  </StackPanel>

  <TextBlock Grid.Row="1" Grid.Column="1" Text="Message" /> 
  <TextBlock Grid.Row="1" Grid.Column="2" Text="Info" />
</Grid>

タイトルと楕円をホストする StackPanel に問題があります。目標は、タイトルの最後に配置する楕円によるオンライン マーカーです。しかし、ビューの一部から外れてはいけません。

TextBox と Ellipse をグリッドのセルに配置しようとしましたが、残念ながら役に立ちません。

<Grid Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2">
  <Grid.ColumnsDefinitions>
     <ColumnDefinition Width="Auto" />
     <ColumnDefinition Width="*" />
  </Grid.ColumnsDefinitions>

  <TextBlock Grid.Column="0" Text="Title should be long" HorizontalAlignment="Left" />
  <Ellipse Grid.Column="1" Fill="White" Stroke="White" Width="7" Height="7" />

</Grid>

私の考えでは、正しくレンダリングされるはずですが、楕円は再びビューポートから外れています。

これは Expression Blend レイアウトのスクリンショットです。実行時に同じレイアウトがレンダリングされます。

グリッド境界:

ここに画像の説明を入力

TextBox の境界:

ここに画像の説明を入力

楕円の境界:

ここに画像の説明を入力

したがって、TextBox と Ellipse はグリッドの外にあります:(

更新:レイアウトの次の動作が必要です

1) 短いタイトル、タイトルの末尾に付いている楕円

ここに画像の説明を入力

2) 長いタイトル、コンテナの右側に付いている楕円

ここに画像の説明を入力

4

1 に答える 1

0

私はあなたのコードを試してみましたが、うまくレンダリングされます（つまり、ビューポートでレンダリングされます。赤い矢印を参照してください）。結果のスクリーンショットを添付してください。(行と列を示すためだけに showgridlines を追加しました)

ここに画像の説明を入力

//--- 意図した効果のためにテストを変更し、コードを修正 ---//

XAML のコード変更: 列定義の幅の値を交換しました。テキスト全体を表示するために、テキストブロックにテキストの折り返しを追加しました。(美学に応じて、代わりにテキストトリミングを選択できます。)

<Grid Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Column="0" Text="Title should be really really really really really long" HorizontalAlignment="Left" TextWrapping="Wrap" />
    <Ellipse Grid.Column="1" Fill="White" Stroke="White" Width="7" Height="7"/>
</Grid>

結果：

ここに画像の説明を入力

于 2012-09-08T18:44:24.163 に答える