自动调整文本块的WPF布局以及右侧的图标 - 如何？ [英] WPF layout for autosize textblock and icon floating on the right - how?

问题描述

我试图获得一个布局，其中的图标浮动在文本块的右端;文本块会增长/缩小为内容。如果没有文本块在网格外运行，我无法做到这一点。例如：

 < Grid x：Name =LayoutRootWidth =500Horizo​​ntalAlignment =LeftShowGridLines = True> 
< Grid.ColumnDefinitions> 
< ColumnDefinition Width =Auto/> 
< ColumnDefinition Width =40/> 
< /Grid.ColumnDefinitions> 
< TextBlock x：Name =textBlockVerticalAlignment =TopHeight =25TextWrapping =NoWrapTextTrimming =CharacterEllipsisGrid.Column =0> 
< TextBlock.Text>更长的时间继续前进，然后继续前进，然后t 
< /TextBlock.Text> 
< / TextBlock> 
< Rectangle Fill =＃FFDE3030Stroke =BlackVerticalAlignment =TopHeight =41Width =41Grid.Column =1/> 
< / Grid> 
  

看起来像自然方法，并且在文本比列/网格短时工作良好，除了文本框和列将无限增长并且不符合网格的边界。

反过来，左边的图标，工作正常，布局更简单，文本块不会无限增长。这是通过这个标记实现的：

 < Grid Grid.Row =1Width =500Horizo​​ntalAlignment =Left > 
< Grid.ColumnDefinitions> 
< ColumnDefinition Width =40/> 
< ColumnDefinition /> 
< /Grid.ColumnDefinitions> 
< Rectangle Fill =＃FFDE3030Stroke =BlackVerticalAlignment =TopHeight =41Width =41Grid.Column =0/> 
< TextBlock x：Name =textBlock2VerticalAlignment =TopHeight =25TextWrapping =NoWrapTextTrimming =CharacterEllipsisGrid.Column =1Horizo​​ntalAlignment =Left> 
< TextBlock.Text>更长的testgrow文本块，它将保持增长，但它会在获取时停止< /TextBlock.Text> 
< / TextBlock> 
< / Grid> 
  

任何帮助表示赞赏。如果网格不起作用，是否有替代布局，我可以将图标悬浮在文本右侧，当文本块太长时，文本块会修剪文本？

另外：

• 不，使用*大小列不起作用，因为列是固定的， 't漂浮在文本的最后




• DockPanel也不起作用，或者至少我或其他人问我没有成功至。它能做的最好的做法是在dockpanel的右侧将图标半切除。

解决

 < WrapPanel Horizo​​ntalAlignment =Left垂直对齐方式
 
 = 顶部 > 
<网格> 
< Grid.ColumnDefinitions> 
< ColumnDefinition Width =*/> 
< ColumnDefinition Width =10/> 
< /Grid.ColumnDefinitions> 
< AccessText TextTrimming =CharacterEllipsisGrid.Column =0Margin =0,0,4,0Text =更长的打字类型如果你继续拼音，结束，这就是为什么它改变了，因为你在中间/> 
< Border Grid.Column =1Width =10Height =10Background =Red/> 
< / Grid> 
< / WrapPanel> 
  

wrappanel似乎提供了必要的魔法。我没有尝试Quartermeister's，但会保存它以备将来参考！

我们的最终布局更复杂，看起来像这样（它是扩展器的标题栏）：

 < WrapPanel Orientation =Vertical> 
< Grid x：Name =HeaderSite> 
< Grid.ColumnDefinitions> 
< ColumnDefinition Width =19/> 
< ColumnDefinition Width =16/> 
< ColumnDefinition Width =Auto/> 
< ColumnDefinition /> 
< ColumnDefinition Width =Auto/> <！ -  7/14：从列表中修复：将所有内容包装在一个包装文件中。允许一个* col。 - > 
< ColumnDefinition Width =19/> 
< /Grid.ColumnDefinitions> 
< ToggleButton x：Name =buttonExpanderToggleButton
 Height =20VerticalAlignment =Top
 /> 
< Image x：Name =imageActivityIconGrid.Column =1
 Height =16Width =16
 Horizo​​ntalAlignment =LeftVerticalAlignment =Top
 Margin =0/> 
 
< AccessText x：Name =textActivityID
 Grid.Column =2
 VerticalAlignment =TopMargin =5,2,0,0
 TextTrimming =CharacterEllipsis
 FontSize =12Horizo​​ntalAlignment =LeftText =MA77777/> 
< AccessText x：Name =textActivityHeader
 Grid.Column =3
 VerticalAlignment =TopMargin =0,2,0,0
 TextTrimming =CharacterEllipsis
 FontSize =12Horizo​​ntalAlignment =LeftText =标题标题标题标题aand标题标题标题标题一点点，如果输入更多内容，则继续输入/> 
< AccessText x：Name =textActivityStatus
 FontWeight =Normal
 FontStyle =Italic
 Grid.Column =4
 TextTrimming = CharacterEllipsis
 VerticalAlignment =TopMargin =0,2,8,0
 FontSize =12Horizo​​ntalAlignment =LeftText =（On Hold）/> 
< Image x：Name =imageLink
 Stretch =NoneVerticalAlignment =TopHorizo​​ntalAlignment =LeftGrid.Column =5/> 
< / Grid> 
< / WrapPanel> 
  

即使使用其他自动大小的列，也可以正常工作。关键似乎是wrappanel和一个*大小的列。如果您将它们全部设置为自动，则不起作用。

我希望这个和Quartermeister的答案可以帮助某人，因为这会让我疯狂＃$％＃$％。 / p>

I am trying to get a layout where an icon floats on the right end of a textblock; the textblock grows/shrinks to content. I cannot make this happen without the textblock running outside the grid. For example:

<Grid x:Name="LayoutRoot" Width="500" HorizontalAlignment="Left" ShowGridLines="True" >
 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto" />
  <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>

Seems like the natural approach and works fine when the text is shorter than the column/grid, except the textbox and column will grow indefinitely and not honor the bounds of the grid.

The inverse, with the icon on the left, works fine with a simpler layout, and the textblock doesn’t grow indefinitely. This is achieved with this markup:

<Grid Grid.Row="1" Width="500" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
  <ColumnDefinition Width="40" />
  <ColumnDefinition />
  </Grid.ColumnDefinitions>
  <Rectangle Fill="#FFDE3030" Stroke="Black" VerticalAlignment="Top" Height="41"  Width="41" Grid.Column="0"/>
  <TextBlock x:Name="textBlock2" VerticalAlignment="Top" Height="25" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Grid.Column="1" HorizontalAlignment="Left">
  <TextBlock.Text>longer testgrow the textblock and it will just keep growing but it will stop when it gets too </TextBlock.Text>
 </TextBlock>
</Grid>

Any help appreciated. If a grid won’t work, is there an alternate layout where I can get the icon floating on the right of the text, and the textblock will trim text when it’s too long?

Also:

• No, using * size columns doesn't work because the columns are fixed, and the icon won't float at the end of the text

• A DockPanel doesn't work either, or at least I or others I've asked haven't been able to. The best it can do is to have the icon half-cut-off outside the dockpanel's right side.

解决方案

Someone internally suggested this answer, which works:

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

The wrappanel seems to provide the necessary magic. I haven't tried Quartermeister's but will save it for future reference!

Our final layout is more complicated and looks like this (it's the header bar for an expander):

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

This works fine too even with the other auto sized columns. The key seems to be the wrappanel and the one * sized column. If you set them all to auto it doesn't work.

I hope this and Quartermeister's answer helps somebody, because this drove me #$%#$% crazy.

这篇关于自动调整文本块的WPF布局以及右侧的图标 - 如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！