本文介绍了自动调整文本块的WPF布局以及右侧的图标 - 如何?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

 < 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布局以及右侧的图标 - 如何?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-04 21:29