自动调整文本块大小和图标浮动在右边的WPF布局-如何?

MaxWidth 在文本块上?如果你加上 MaxWidth="460" 第一个例子:

<Grid x:Name="LayoutRoot" Width="500" HorizontalAlignment="Left" ShowGridLines="True" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="40"/>
    </Grid.ColumnDefinitions>
    <TextBlock MaxWidth="460" x:Name="textBlock" VerticalAlignment="Top" Height="25" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Grid.Column="0" >
        <TextBlock.Text>longer keeps going and going testgrand you going and then t</TextBlock.Text>
    </TextBlock>
    <Rectangle Fill="#FFDE3030" Stroke="Black" VerticalAlignment="Top" Height="41" Width="41" Grid.Column="1"/>
</Grid>

然后TextBlock将水平增长,并且始终使矩形紧靠其右侧。它的宽度不会超过460,所以TextBlock加上矩形的宽度不应该超过500 TextBlock.MaxWidth 到 Grid.ActualWidth 用一个减去矩形宽度的转换器。

编辑:

而不是 Width 在网格上。这样,当文本变小时,网格本身就会变小,因此矩形始终位于文本的边缘。

<Grid x:Name="LayoutRoot" MaxWidth="500" HorizontalAlignment="Left" ShowGridLines="True" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="40"/>
    </Grid.ColumnDefinitions>
    <TextBlock x:Name="textBlock" VerticalAlignment="Top" Height="25" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Grid.Column="0" >
        <TextBlock.Text>longer keeps going and going testgrand you going and then t</TextBlock.Text>
    </TextBlock>
    <Rectangle Fill="#FFDE3030" Stroke="Black" VerticalAlignment="Top" Height="41" Width="41" Grid.Column="1"/>
</Grid>

有人在内部建议了这个答案,这个答案很有效:

    <WrapPanel HorizontalAlignment="Left" VerticalAlignment="Top">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="10" />
            </Grid.ColumnDefinitions>
            <AccessText TextTrimming="CharacterEllipsis" Grid.Column="0" Margin="0,0,4,0" Text="type more typingon the long hi longer than what if you keep tyingin and get to the end and that's why it changed because you were in the middle" />
            <Border Grid.Column="1" Width="10" Height="10" Background="Red" />
        </Grid>
    </WrapPanel>

我们的最终布局更为复杂,如下所示(它是扩展器的标题栏):

<WrapPanel Orientation="Vertical">
    <Grid x:Name="HeaderSite" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="19" />
            <ColumnDefinition Width="16" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" /> <!-- 7/14: fix from list: wrap the whole thing in a wrappanel. Allows for one * col. -->
            <ColumnDefinition Width="19" />
        </Grid.ColumnDefinitions>
        <ToggleButton  x:Name="buttonExpanderToggleButton"
            Height="20" VerticalAlignment="Top"
                />
        <Image x:Name="imageActivityIcon" Grid.Column="1"
            Height="16" Width="16" 
            HorizontalAlignment="Left" VerticalAlignment="Top" 
            Margin="0"/>

        <AccessText x:Name="textActivityID" 
            Grid.Column="2"
            VerticalAlignment="Top" Margin="5,2,0,0" 
            TextTrimming="CharacterEllipsis"
            FontSize="12" HorizontalAlignment="Left" Text="MA77777"/>
        <AccessText x:Name="textActivityHeader" 
            Grid.Column="3"
            VerticalAlignment="Top" Margin="0,2,0,0" 
            TextTrimming="CharacterEllipsis"
            FontSize="12" HorizontalAlignment="Left" Text="Title title title title aand Title title title title a little and if you type more what happens as you keep typing "/>
        <AccessText x:Name="textActivityStatus" 
            FontWeight="Normal" 
            FontStyle="Italic" 
            Grid.Column="4"
            TextTrimming="CharacterEllipsis"
            VerticalAlignment="Top" Margin="0,2,8,0"
            FontSize="12" HorizontalAlignment="Left" Text="(On Hold)"/>
        <Image x:Name="imageLink" 
            Stretch="None" VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Column="5"/>
    </Grid>
</WrapPanel>

即使使用其他自动调整大小的列,这也可以正常工作。关键似乎是包装和一个*大小的列。如果你把它们都设置为自动,它就不工作了。

下面的代码将产生以下输出,这就是你要找的???

<Grid Width="200">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="0" Text="longer keeps going and going testgrand you going and then t" TextTrimming="CharacterEllipsis"/> 
    <Rectangle Grid.Column="1" Fill="#FFDE3030" Stroke="Black" VerticalAlignment="Top" Height="41" Width="41" />
</Grid>

我也有类似的问题;我想用一个外部大小的边界区域显示一些内容,但包含两个边界区域 TextBlock s、 其中第一个是自动调整大小,第二个是固定大小,第二个随着第一个变小而向左浮动,但在右边缘停止(因此第一个块的文本被剪裁,而不是第二个变得不可见)。

HorizontalAlignment="Left" 第一列设置为星形。

<Border BorderThickness="1" BorderBrush="Black">
    <Grid HorizontalAlignment="Left">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Text="{Binding Value}" />
        <TextBlock Grid.Column="1" Text="&#x23EB;" Margin="4,0,0,0" Foreground="Blue" />
    </Grid>
</Border>

看来,这种方法的工作方式是(有点反直觉)的 Border 保持全宽(由其父布局设置),而 Grid 边框 . 这是第二个 控件 可见。