Question

我有下一个布局

<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中有一个主题是标题和椭圆的问题，目标是椭圆whitch的在线标记应该放在标题的末尾。但它不应该超出视图部分。

我试图将TextBox和Ellipse放入Grid的单元格中，但这并没有帮助。

<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布局scrinshots，相同的布局在运行时呈现。

Grid界限：

enter image description here

TextBox界限：

enter image description here

Ellipse界限：

enter image description here

所以TextBox和Ellipse不在网格中：（

更新：我需要布局的下一个行为

1）短标题，标题末尾的椭圆

enter image description here

2）长标题，椭圆附在容器右侧

enter image description here

Answer 1

我尝试了你的代码，它呈现得很好（换句话说，它在视口中呈现。请参阅红色箭头）。请附上结果截图。（我添加了showgridlines只是为了说明行和列）

enter image description here

// ---更改了预期效果的测试和固定代码--- //

XAML中的代码更改：交换了columndefinitions的宽度值。添加Textwrapping到textblock以查看整个文本。（您可以根据自己的美学选择文字修饰。）

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

结果：

enter image description here

如何剪切TextBox宽度以防止退出网格？

1 个答案: