问题 包裹板儿童可以对齐吗？

玻璃杯

玻璃杯

知名会员
已加入
2019年11月22日
留言内容
126
编程经验
Beginner
我有一个带有几个标签的包装面板，用户可以启用或禁用这些标签（折叠或显示）。当它环绕时，第二行上的标签与上面的标签不对齐（因为它们的长度不同）。
有没有办法使它们彼此对齐，使它们的中心对齐？
 
Sort by date Sort by votes
玻璃杯

玻璃杯

知名会员
已加入
2019年11月22日
留言内容
126
编程经验
Beginner
如果有足够的标签可见，则需要环绕它们。我不知道如何使用堆栈面板。是否有可能？
 
投票 0 下注
羊皮

羊皮

退休程序员
工作人员
已加入
2018年9月5日
留言内容
1,926
地点
英国
编程经验
10+
不可以，因为StackPanel不会按照您想要的方式包装内容。相反，它向一个方向扩展其内容；是水平的还是垂直的。这使您可以将项目堆叠在堆叠中另一个项目之上。

覆盖面板将通过将它们的子控件包装在一起来堆叠其子控件，这是基于每个子控件的最佳可能配合以充分填充该覆盖面板。

这些都不是您想要的。由于我不完全了解您在做什么，因此我不建议其他选择。也许最好是手动初始化控件位置？
 
投票 0 下注
羊皮

羊皮

退休程序员
工作人员
已加入
2018年9月5日
留言内容
1,926
地点
英国
编程经验
10+
The element.Margin being used from the framework in that Wrap Panel is all what is giving the spacing of the objects in that article... <Button Margin="5,5,5,5">Alpha</Button> Sure, I guess it could work, but you are still using the wrong control for the job IMO. The UniformWrapPanel inherits from a panel behind the scenes. Some of that code could be used with a simple panel instead; to inherit the same functionality.

If our op could explain what their goal is, maybe we could recommend a more fitting practical control. Based on the little info given, maybe it be best to use <Grid.ColumnDefinitions> 和 set the width to Auto 并通过在Xaml中设置控件的边距, you can set some "spacing"在您的元素之间。
 
投票 0 下注
玻璃杯

玻璃杯

知名会员
已加入
2019年11月22日
留言内容
126
编程经验
Beginner
感谢您的建议，我越来越近了。

虽然我不知道如何使用该自定义面板，但是Sheepings确实有一点要说，但我认为我不需要使用它。通过为我的包装面板的子代设定堆叠面板的宽度和高度，可以使它们很好地对齐，这只留下了一个小怪癖。这是一张有关我在说什么的更好主意的照片：

注释2020-01-06 161828.jpg


整个事情就是一片混乱。它的子级是内部有两个文本块，一个文本文本块和一个数字文本块的堆栈面板。

一切都很好，呈网格状，但请注意，由于标题文本的缘故，在每一行上都将一个零推出与另一个零的水平对齐。这可以通过以某种方式使这些数字文本块停靠在底部，而文本仍停靠在顶部以免彼此干扰来解决。我尝试用底座面板替换堆栈面板，并根据需要将每个文本块DockPanel.Dock设置为顶部和底部，并得到以下信息：

注释2020-01-06 170001.jpg


这不是完美的，在那些零和单行标题文本之间的空格有点令人不愉快。

我将尝试用两行网格替换码头面板/堆栈面板，为每一行提供50％的空间，为每个文本块平均分配一半的面积。也许会有效，我会让你知道。如果你们有什么主意，我会很高兴。
 
投票 0 下注
羊皮

羊皮

退休程序员
工作人员
已加入
2018年9月5日
留言内容
1,926
地点
英国
编程经验
10+
那不是我给你的建议。尽管我确实很欣赏您学习不同控件的热情，但我也并不钦佩您使用不当。让我们回顾一下：
斯平丁斯说：
maybe it be best to use <Grid.ColumnDefinitions> 和 set the width to Auto 并通过在Xaml中设置控件的边距, you can set some "spacing"在您的元素之间。
点击展开...
If you go onto MSDN and search for Grid.ColumnDefinitions you will see what I am suggesting. Had you already implemented as I suggested, you wouldn't need a wrap panel at all; least with numerous stack panels. That's a misuse of controls.
玻璃精灵说：
通过为我的包装面板的子代设定堆叠面板的宽度和高度，可以使它们很好地对齐，这只留下了一个小怪癖。
点击展开...
同样，这不是堆栈面板的用途，正如我上面已经向您解释的那样。我会再次引用自己，希望您能阅读我给您的建议。我说 ：
斯平丁斯说：
不可以，因为StackPanel不会按照您想要的方式包装内容。相反，它向一个方向扩展其内容；是水平的还是垂直的。这使您可以将项目堆叠在堆叠中另一个项目之上。

覆盖面板将通过将它们的子控件包装在一起来堆叠其子控件，这是基于每个子控件的最佳可能配合以充分填充该覆盖面板。
点击展开...
话虽如此;我并不是要暗示那里的任何地方都在包装面板内使用了许多堆叠面板。
 
投票 0 下注
羊皮

羊皮

退休程序员
工作人员
已加入
2018年9月5日
留言内容
1,926
地点
英国
编程经验
10+
斯平丁斯说：
并通过在Xaml中设置控件的边距
点击展开...
To be doubly clear, this was implying that you set a margin on your labels through your Xaml code, which will give you adequate spacing when your Coloums are being auto aligned to your Grid by using the Auto property when setting the width for each 列定义s.

If I am not being clear, you need to ask me a direct question. Otherwise if you understand what I am advising, you then need to turn to read the documentation for <Grid.ColumnDefinitions>.
 
投票 0 下注
羊皮

羊皮

退休程序员
工作人员
已加入
2018年9月5日
留言内容
1,926
地点
英国
编程经验
10+
C#: 
    <Grid HorizontalAlignment="Left" Height="269" VerticalAlignment="Top" Width="509">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
    </Grid>
Grid.ColumnDefinition是网格控件的子片段。是时候开始使用MSDN并开始阅读了，因为您不需要使用任何这些面板来完成屏幕快照中提供的操作。网格不能单独提供任何东西。 ;）
 
投票 0 下注
玻璃杯

玻璃杯

知名会员
已加入
2019年11月22日
留言内容
126
编程经验
Beginner
我很困惑 ：使困惑：

我不明白网格如何完成包装面板的工作。也许模拟看起来像一个简单的网格，但是当用户启用更多的文本块时，我需要将它们填充到右侧，然后回绕，在调整窗口大小时也会发生所有的混乱。如果您说网格可以做到这一点，那么这就是我的困惑所在。我已经将自动间距用于网格定义，并且知道如何使用该间距（我认为），但是根本想不出任何方法来实现网格。

斯平丁斯说：
那不是我给你的建议。
点击展开...
斯平丁斯说：
我并不是要暗示那里的任何地方都在包装面板内使用了许多堆叠面板。
点击展开...

我知道，很抱歉您不清楚，这些堆栈面板是我从一开始就设置的原始面板。我用它们将两个文本块相互堆叠。目前，我已将其替换为两行网格，每个网格的高度都设置为*以保持它们成比例。

斯平丁斯说：
If you go onto MSDN and search for Grid.ColumnDefinitions you will see what I am suggesting. Had you already implemented as I suggested, you wouldn't need a wrap panel at all; least with numerous stack panels. That's a misuse of controls.
点击展开...

我不知道如何实现它，我根本不了解它。抱歉，我太密集了，我不明白。我在Grid.ColumnDefinitions上查看了MSDN，但没有什么比我需要的更突出。到目前为止，据我了解，唯一可以做我需要的是包装板。

但我设法做到了这一点，通过使用特定尺寸的2行网格（将两个文本块彼此堆叠）作为包装面板的子级（具有适当的边距），一切看起来和行为均与我想要的完全一样。真的可以这么错吗？ 😇
 
投票 0 下注
羊皮

羊皮

退休程序员
工作人员
已加入
2018年9月5日
留言内容
1,926
地点
英国
编程经验
10+
C#: 
<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="WPFTestApp.Window1"
        Title="Window1" Width="Auto">
    <Grid Width="Auto" AutomationProperties.IsOffscreenBehavior="Onscreen">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Label Margin="5,5,5,5" Content="Row AAAAA Column A" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
        <Label Margin="5,5,5,5" Content="Row A Column B" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
        <Label Margin="5,5,5,5" Content="Row A Column CCCCCCC" Grid.Row="0" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
        <Label Margin="5,5,5,5" Content="Row B Column A" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
        <Label Margin="5,5,5,5" Content="Row B Column B" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
        <Label Margin="5,5,5,5" Content="Row B Column C" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
    </Grid>
</Window>
 
投票 0 下注
羊皮

羊皮

退休程序员
工作人员
已加入
2018年9月5日
留言内容
1,926
地点
英国
编程经验
10+
因此，您试图说仅使用网格是不可能的吗？废话。它不是完美的，您需要对其进行调整。

Your current problem is your lack of experience with Xaml code. But don't take that as me judging you, as I'm not. I admire your willingness to buy a book on WPF alone, then to further teach yourself, by dabbling with the various controls to try and achieve a very simple task. That's actually rude of me, since any task is easy when you know how to approach it. Whereas; in my case, I've spent the better part of my later career and life learning as much WPF as I could. So, this is actually all very boring for me, as it is only basic Xaml, and basic structuring. Of course, you're only partly there, since you have yet to write your code for the various layout to be altered when your user decides to do his clicky thing and add more controls, and for each control, you need more <Grid.ColumnDefinitions> 和 <Grid.RowDefinitions>, and once they are created, you would add more labels etc. It's not something I will be doing for you, as its time consuming, and time I'd rather not waste doing it for you. It's a learning experience for you too, so play with what I gave you.

祝你有一个美好的夜晚。
 
投票 0 下注
跳伞

跳伞

工作人员
已加入
2019年4月6日
留言内容
2,532
地点
弗吉尼亚州切萨皮克
编程经验
10+
@glasswizzard :
在文章＃7的屏幕截图中，您有一些项目包含两行文本。两行文本是有意的，还是长行文本的结果，因为您为每个项目设置了特定的宽度，所以该行将行换成两行？
所有物品的宽度都一样吗？
如果它们都相同，那是您硬编码的东西，还是以某种方式计算出来的？
如果它们不完全相同，是否有最大宽度？该最大宽度是您硬编码的，还是以某种方式计算的？
如果它们不完全相同，那么狭窄的物品是否应该居中于较宽的物品下方？
对于两行换行的项目，您是否决定要使文本顶部对齐，在数字上方对齐至底部还是在顶部与数字之间居中？
 
投票 0 下注
玻璃杯

玻璃杯

知名会员
已加入
2019年11月22日
留言内容
126
编程经验
Beginner
斯平丁斯说：
因此，您试图说仅使用网格是不可能的吗？
点击展开...

我并没有试图将其陈述为事实，只是意味着我无法理解 完全没有 怎么做，我特别在谈论"wrapping"，用包装纸板很明显而且很简单，用网格我仍然完全不知所措，即使到目前为止您提供了帮助（我也因为不明白这一点而感到烦恼）。如果我想尝试您描述的内容，我会将我的文本块（一直以来都称为标签）设置为它们各自合适的行/列，这是我无法通过的砖墙，它们必须移动，他们怎么会搬到另一个牢房？

斯平丁斯说：
Your current problem is your lack of experience with Xaml code. But don't take that as me judging you, as I'm not. I admire your willingness to buy a book on WPF alone, then to further teach yourself, by dabbling with the various controls to try and achieve a very simple task. That's actually rude of me, since any task is easy when you know how to approach it. Whereas; in my case, I've spent the better part of my later career and life learning as much WPF as I could. So, this is actually all very boring for me, as it is only basic Xaml, and basic structuring. Of course, you're only partly there, since you have yet to write your code for the various layout to be altered when your user decides to do his clicky thing and add more controls, and for each control, you need more <Grid.ColumnDefinitions> 和 <Grid.RowDefinitions>, and once they are created, you would add more labels etc. It's not something I will be doing for you, as its time consuming, and time I'd rather not waste doing it for you. It's a learning experience for you too, so play with what I gave you.

祝你有一个美好的夜晚。
点击展开...

当人们在教我一些东西时，我从不亲自做任何事情或作为判断力，我知道我在最基本的事情上失败了，自我学习是一种挣扎。我很感激能帮助这个陷入困境的菜鸟的任何时间。

我查看了您发布的代码，并在VS中运行了它。我了解您所写的内容，只是看不到任何包装方式，因为它位于网格中。我并不是要说您错了，很明显，您是知道的人，不是我，这是因为除非我看到网格这样做或不知道是否可以相信。在您的代码中有三列，如果窗口大小足够减小，您认为要包装这些列还需要多少代码？您能给我一些关于该特定方面的提示吗，这是我唯一不了解的包装部分。

这是我遇到甚至无法尝试尝试的唯一的一次机会。我觉得我缺少一些关键信息，这使得在某种程度上看来这是绝对不可能的。这让我想知道我是否不清楚，并给了你关于我要做什么的错误印象。因此，为了确保并且绝对清晰，您介意将以下代码粘贴到您的IDE中，运行该应用程序，并确认调整窗口大小时看到的行为可以单独使用网格来完成，如果可以，那么这使我想知道为什么包装板会在网格上使用（嗯，我想对于我们菜鸟来说更容易）。

XML: 
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Width="510" Height="300" Background="#FF191919" Foreground="LightSlateGray" WindowStartupLocation="CenterScreen" >
       
        <WrapPanel  Grid.Row="3"
Grid.Column="1"
Grid.ColumnSpan="3"
                    HorizontalAlignment="Center">
           
<Grid Height="75" Width="100">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" Text="LoremIpsum" TextDecorations="Underline" HorizontalAlignment="Center" FontSize="14" FontFamily="Georgia"/>
<TextBlock Grid.Row="1" VerticalAlignment="Center" Text="0" HorizontalAlignment="Center" FontSize="28"/>
            </Grid>
            <Grid  Height="75" Width="100">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" Text="LoremIpsum" TextDecorations="Underline" HorizontalAlignment="Center" FontSize="14" FontFamily="Georgia"/>
<TextBlock Grid.Row="1" VerticalAlignment="Center" Text="0" HorizontalAlignment="Center" FontSize="28" />
            </Grid>
            <Grid  Height="75" Width="100">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" Text="LoremIpsum" TextDecorations="Underline" HorizontalAlignment="Center" FontSize="14" FontFamily="Georgia"/>
<TextBlock Grid.Row="1" VerticalAlignment="Center" Text="0" HorizontalAlignment="Center" FontSize="28"/>
            </Grid>
            <Grid  Height="75" Width="100">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" Text="LoremIpsum Lorem" TextDecorations="Underline" HorizontalAlignment="Center" FontSize="14" FontFamily="Georgia"/>
<TextBlock Grid.Row="1" VerticalAlignment="Center" Text="0" HorizontalAlignment="Center" FontSize="28"/>
            </Grid>
           
<Grid Margin="0 5" Height="75" Width="100">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" Text="LoremIpsum" TextDecorations="Underline" HorizontalAlignment="Center" FontSize="14" FontFamily="Georgia"/>
<TextBlock Grid.Row="1" VerticalAlignment="Center" Text="0" HorizontalAlignment="Center" FontSize="28"/>
            </Grid>
            <Grid Margin="0 5" Height="75" Width="100">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" Text="LoremIpsum Lorem" TextDecorations="Underline" HorizontalAlignment="Center" FontSize="14" FontFamily="Georgia"/>
<TextBlock Grid.Row="1" VerticalAlignment="Center" Text="0" HorizontalAlignment="Center" FontSize="28"/>
            </Grid>
            <Grid Margin="0 5" Height="75" Width="100">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" Text="LoremIpsum Lorem" TextDecorations="Underline" HorizontalAlignment="Center" FontSize="14" FontFamily="Georgia"/>
<TextBlock Grid.Row="1" VerticalAlignment="Center" Text="0" HorizontalAlignment="Center" FontSize="28"/>
            </Grid>
            <Grid Margin="0 5" Height="75" Width="100">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" Text="LoremIpsum Lorem" TextDecorations="Underline" HorizontalAlignment="Center" FontSize="14" FontFamily="Georgia"/>
<TextBlock Grid.Row="1" VerticalAlignment="Center" Text="0" HorizontalAlignment="Center" FontSize="28"/>
            </Grid>
            <Grid Margin="0 5" Height="75" Width="100">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" Text="LoremIpsum Lorem" TextDecorations="Underline" HorizontalAlignment="Center" FontSize="14" FontFamily="Georgia"/>
<TextBlock Grid.Row="1" VerticalAlignment="Center" Text="0" HorizontalAlignment="Center" FontSize="28"/>
            </Grid>
            <Grid Margin="0 5" Height="75" Width="100">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" Text="LoremIpsum Lorem" TextDecorations="Underline" HorizontalAlignment="Center" FontSize="14" FontFamily="Georgia"/>
<TextBlock Grid.Row="1" VerticalAlignment="Center" Text="0" HorizontalAlignment="Center" FontSize="28"/>
            </Grid>
            <Grid Margin="0 5" Height="75" Width="100">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" Text="LoremIpsum" TextDecorations="Underline" HorizontalAlignment="Center" FontSize="14" FontFamily="Georgia"/>
<TextBlock Grid.Row="1" VerticalAlignment="Center" Text="0" HorizontalAlignment="Center" FontSize="28"/>
            </Grid>
            <Grid Margin="0 5" Height="75" Width="100">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" Text="LoremIpsum Lorem" TextDecorations="Underline" HorizontalAlignment="Center" FontSize="14" FontFamily="Georgia"/>
<TextBlock Grid.Row="1" VerticalAlignment="Center" Text="0" HorizontalAlignment="Center" FontSize="28"/>
            </Grid>
            <Grid Margin="0 5" Height="75" Width="100">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" Text="LoremIpsum" TextDecorations="Underline" HorizontalAlignment="Center" FontSize="14" FontFamily="Georgia"/>
<TextBlock Grid.Row="1" VerticalAlignment="Center" Text="0" HorizontalAlignment="Center" FontSize="28"/>
            </Grid>
            <Grid Margin="0 5" Height="75" Width="100" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" Text="LoremIpsum Lorem" TextDecorations="Underline" HorizontalAlignment="Center" FontSize="14" FontFamily="Georgia"/>
<TextBlock Grid.Row="1" VerticalAlignment="Center" Text="0" HorizontalAlignment="Center" FontSize="28"/>
            </Grid>
        </WrapPanel>
   
</Window>

跳伞运动员说：
@glasswizzard :
在文章＃7的屏幕截图中，您有一些项目包含两行文本。两行文本是有意的，还是长行文本的结果，因为您为每个项目设置了特定的宽度，所以该行将行换成两行？
点击展开...

两者都为每条线设置了宽度和高度，这为我限制了每行的长​​度，以防止它们变得太长。

跳伞运动员说：
所有物品的宽度都一样吗？
点击展开...

是的，宽度和高度相同，您可以在上面的代码中看到它。

跳伞运动员说：
如果它们都相同，那是您硬编码的东西，还是以某种方式计算出来的？
点击展开...

我对它进行了硬编码，找出了合适的大小以使所有内容整齐并全部设置。

跳伞运动员说：
对于两行换行的项目，您是否决定要使文本顶部对齐，在数字上方对齐至底部还是在顶部与数字之间居中？
点击展开...

我设法使它们看起来像下面的图像，非常完美。

注释2020-01-08 122702.jpg
 
Last edited:
投票 0 下注
羊皮

羊皮

退休程序员
工作人员
已加入
2018年9月5日
留言内容
1,926
地点
英国
编程经验
10+
玻璃精灵说：
我只是看不到任何包裹，因为它在网格中。
点击展开...
没有。只是要注意，当我回答帖子时，我会根据提出的问题回答帖子，而我只处理该问题的具体内容。您问如何解决这个问题，我为您提供了使用网格的示例。但是，您的代码正在使用多个网格。那不是我建议您去做的方式。如果您回读了，我建议使用 一 网格，并为您提供了使用文件后面的代码添加列/行定义，然后像在Xaml中所做的那样将标签或文本框添加到该网格的线索。除非您按照我上面的建议在文件背后的代码中执行此操作。我还说过，我并没有为您写这篇文章，因为它需要很多时间，而且我通常会为此付费，因为这也很耗时，但是我确实解释了如何解决，不是吗？

同样，在您的代码中，您使用了多个网格，这澄清了我在上面的声明，您缺乏Xmal的经验来自己实现，但是我的最佳建议是继续插手它，并继续分享您的进度，如果我看到您写的东西可以改进，然后我会改善，并且我不介意为您提供帮助。你也不是一个痛苦的屁股。那就是你在这里的目的；向对论坛做出贡献的人们学习，并回答您的问题。这就是为什么我们在这里尝试为您提供最佳指导的原因，但是您要的不是我要为其编写示例代码的内容，除非得到报酬，因为时间也没有了此刻的一面。话虽这么说。跳伞运动员一直在调整我发布的内容，我认为他写了一些您可能会觉得有用的东西。

如果您想偷懒，可以使用 一 包裹网格，让它负责调整大小，但是我的理论是为那些尝试这样做的人准备的；您可能会发现您可能会遇到对象位于网格内的对齐问题。
玻璃精灵说：
如果窗口大小足够减小，您认为还需要多少代码来包装这些列？
点击展开...
这是一个很难回答的问题。网格上有多种属性，还需要为要添加到该网格的每个新对象设置其子对象。对于要添加的每个新对象，您将需要其他列/行定义，然后再添加新对象，所以，是的，我想可能会有很多额外的代码。哈哈
玻璃精灵说：
我觉得我缺少一些关键信息，这使得这似乎绝对不可能
点击展开...
唯一缺少的是您对Xaml的经验不足。有很多不同的方法可以解决此问题，您只需要尝试更多。
玻璃精灵说：
运行应用程序并确认调整窗口大小时看到的行为可以单独使用网格来完成
点击展开...
在您的代码中：
C#: 
        <Grid Margin="0 5" Height="75" Width="100" >
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <TextBlock VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" Text="LoremIpsum Lorem" TextDecorations="Underline" HorizontalAlignment="Center" FontSize="14" FontFamily="Georgia"/>
            <TextBlock Grid.Row="1" VerticalAlignment="Center" Text="0" HorizontalAlignment="Center" FontSize="28"/>
        </Grid>
See how you are using the <RowDefinition Height="*"/>, well you should be using the Auto property when setting the height 和 宽度和 列定义的。特别是因为如果您不知道标签/其他对象的宽度，则auto属性将为您解决这一问题。您在正确的道路上，只需要使用 一 对象网格而不是 多 对象网格。这就是为什么我们可以添加列和行。您刚刚从使用多个堆栈面板更改为使用多个网格。返回并再次阅读帖子8。
 
投票 0 下注
羊皮

羊皮

退休程序员
工作人员
已加入
2018年9月5日
留言内容
1,926
地点
英国
编程经验
10+
我还应该指出，您的网格都没有命名，那么您如何从代码隐藏文件访问它们呢？
 
投票 0 下注
羊皮

羊皮

退休程序员
工作人员
已加入
2018年9月5日
留言内容
1,926
地点
英国
编程经验
10+
我只是想回铃来清理一下东西，因为我在上面有些偏离。
玻璃精灵说：
我有自己的文本块（我一直以来都称它们为标签），每个都设置为它们合适的行/列，这是我无法通过的砖墙，它们必须移动，如何才能移动到另一个细胞？
点击展开...
Why would they have to move or move to a different grid if you were using the Auto value as I have done in the example. You're not using the same structure I was. If you are needing to add more controls, then you need to add the relevant Column/RowDefinitions in your code behind file. You're not going to be able to do that, since you haven't named any of your Grid controls. In WPF, if you don't name your controls in Xaml, you simply can't access those controls in a code behind file. So how do you expect to add new Column/Row definitions to a control you can't access? Your Grids are nameless.... <Grid Margin="0 5" Height="75" Width="100" >. Read my comments above regarding using one Grid.
玻璃精灵说：
我了解您所写的内容，只是看不到任何包装方式，因为它位于网格中。
点击展开...
您将从一个基本布局开始。 一格 -多个列/行定义。为每个定义添加基本数量的控件。当用户使用您的表单并将其添加到表单中时，您需要首先添加相关的“列/行”定义，然后将新的控件添加到该网格中。
斯平丁斯说：
没有。只是要注意，当我回答帖子时，我会根据提出的问题回答帖子，而我只处理该问题的具体内容。您问如何解决这个问题，我为您提供了使用网格的示例。
点击展开...
我对以上引用的意思是您的问题已经从"如何在网格中而不是在包装面板中完成我想做的事情"（根据我的建议），"调整窗口大小时如何处理网格". Your recent problem with resizing the window is a different problem, and one which should be addressed on a new topic when you reach that stage. First, stick with this topic and write the Xaml as I have shown and explained to you. Give your Grid a name, and then write your C# code in your Code behind file for adding the functionality of adding new controls to your grid. Once you reach this point, you will probably end up using a wrap panel around all of the grids items, (that is of course if you don't want to bother writing a lengthy class based on the Window Size from the Windows SizeChangedEventArgs to structure your grids elements based on the window size and how many items are in your grid.) Yes this would be avoided by using a wrap panel. That being said, I'd prefer to write an explicit class to handle the grids elements when the Window changes size. I don't think there are many programmers who would do it my way, so I am not advising that you do either, as the simpler thing at that point would be to use a wrap panel and be done with it. As an added exercise, you could always remove your wrap panel and write an explicit class to handle your Grids elements when your window size changes.

看看我的网格布局与您的网格布局相比：
C#: 
    <Grid x:Name="MyGrid" Width="Auto">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Label Margin="5,5,5,5" Content="Row AAAAA Column A" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
        <Label Margin="5,5,5,5" Content="Row A Column B" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
        <Label Margin="5,5,5,5" Content="Row A Column CCCCCCC" Grid.Row="0" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
        <Label Margin="5,5,5,5" Content="Row B Column A" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
        <Label Margin="5,5,5,5" Content="Row B Column B" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
        <Label Margin="5,5,5,5" Content="Row B Column C" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
    </Grid>
我已删除了您的某些网格，因为它们是重复的。但是您的结构与我的不同。注意，您已经离开了，并用许多网格替换了众多的堆叠面板。您只需要一个网格，就可以使用该网格从文件后面的C＃代码中添加列/行定义和其他控件。比较结构：
C#: 
    <WrapPanel  Grid.Row="3"
Grid.Column="1"
Grid.ColumnSpan="3"
                    HorizontalAlignment="Center">
        <Grid Margin="0 5" Height="75" Width="100">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <TextBlock VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" Text="LoremIpsum" TextDecorations="Underline" HorizontalAlignment="Center" FontSize="14" FontFamily="Georgia"/>
            <TextBlock Grid.Row="1" VerticalAlignment="Center" Text="0" HorizontalAlignment="Center" FontSize="28"/>
        </Grid>
        <Grid Margin="0 5" Height="75" Width="100" >
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <TextBlock VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" Text="LoremIpsum Lorem" TextDecorations="Underline" HorizontalAlignment="Center" FontSize="14" FontFamily="Georgia"/>
            <TextBlock Grid.Row="1" VerticalAlignment="Center" Text="0" HorizontalAlignment="Center" FontSize="28"/>
        </Grid>
    </WrapPanel>
如果按照我的方式构造Xaml，那么在后面的C＃代码中，您可以像这样访问所有列定义：
C#: 
            foreach (ColumnDefinition c in MyGrid.ColumnDefinitions)
            {

            }
并像这样添加其他的列/行定义（其中MyGrid是我的Grid的名称）：
C#: 
            var CD = new ColumnDefinition();
            CD.Width = GridLength.Auto;
            MyGrid.ColumnDefinitions.Add(CD);
然后，再添加一些额外的控件，这些控件要求“列/行”等于添加的控件数量，在这种情况下，现在变成文本框。

回头看看第4条，看看您已经走了多远。您开始使用所有错误的控件，现在使用的是正确的控件，您只需要根据我已经尝试向您解释的内容，了解Xaml语法的正确顺序和用法。希望现在我有更多时间向您正确解释它，希望对您有所帮助并且更容易理解。如果您有任何疑问，请告诉我们。

编辑 ：
=>尝试一下，因为它尽可能接近地向您展示如何执行我所描述的内容。除使用“自动”代替“列/行”的宽度和高度值外，其他方式都使用。
 
Last edited:
投票 0 下注
跳伞

跳伞

工作人员
已加入
2019年4月6日
留言内容
2,532
地点
弗吉尼亚州切萨皮克
编程经验
10+
玻璃精灵说：
我有一个带有几个标签的包装面板，用户可以启用或禁用这些标签（折叠或显示）。当它环绕时，第二行上的标签与上面的标签不对齐（因为它们的长度不同）。
有没有办法使它们彼此对齐，使它们的中心对齐？
点击展开...
是的。

所以我有以下内容：
Screenshot_1.png


Which is laid out using the WrapPanel in the following XAML:
MainWindow.xaml: 
<Window x:Class="WpfTiles.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfTiles"
        mc:Ignorable="d"
        Title="Color Swatches" Height="450" Width="810">
    <ScrollViewer>
        <ItemsControl ItemsSource="{Binding Colors}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical"
                                Margin="5">
                        <Border Height="60">
                            <TextBlock Text="{Binding Name}"
                                       FontSize="16"
                                       TextWrapping="Wrap"
                                       TextAlignment="Center"
                                       VerticalAlignment="Bottom"/>
                        </Border>
                        <Rectangle Fill="{Binding Brush}"
                                   Height="40"/>
                        <TextBlock Text="{Binding HexValue}"
                                   FontSize="10"
                                   TextAlignment="Center"/>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Window>

要获得此布局：
Screenshot_3.png


I just had to set the ItemWidth attribute of the WrapPanel:
MainWindow.xaml: 
<Window x:Class="WpfTiles.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfTiles"
        mc:Ignorable="d"
        Title="Color Swatches" Height="450" Width="810">
    <ScrollViewer>
        <ItemsControl ItemsSource="{Binding Colors}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel ItemWidth="110"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical"
                                Margin="5">
                        <Border Height="60">
                            <TextBlock Text="{Binding Name}"
                                       FontSize="16"
                                       TextWrapping="Wrap"
                                       TextAlignment="Center"
                                       VerticalAlignment="Bottom"/>
                        </Border>
                        <Rectangle Fill="{Binding Brush}"
                                   Height="40"/>
                        <TextBlock Text="{Binding HexValue}"
                                   FontSize="10"
                                   TextAlignment="Center"/>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Window>

(An alternate solution is to set the Width of the StackPanel. Use 100 for Width, instead of the 110 for ItemWidth. 110 == 100 + 5 + 5.)

调整主窗口的大小即开即用，无需编写任何额外的代码。只需抓住窗口边缘并调整大小即可。

A quick not about the use of Border around the TextBlock that holds the color name. That is to force the text to be flushed bottom within the StackPanel. There is a way to redo StackPanel using a Grid 和 just row definitions and the existing textboxes and rectangles, but I was trying to stay focused on the creation and alignment of the tiles.

The code-behind I have is to setup the DataContext:
MainWindow.xaml.cs: 
using System.Windows;

namespace WpfTiles
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new MainWindowViewModel();
        }
    }
}

这是其他相关的源文件：
MainWindowViewModel.cs： 
using System.Collections.ObjectModel;
using System.Linq;

namespace WpfTiles
{
    class MainWindowViewModel
    {
        public ObservableCollection<ColorInfo> Colors { get; }

        public MainWindowViewModel()
        {
            Colors = new ObservableCollection<ColorInfo>(ColorInfo.EnumerateAllColors().OrderBy(c => c.Name));
        }
    }
}

ColorInfo.cs: 
using System.Collections.Generic;
using System.Text;
using System.Windows.Media;

namespace WpfTiles
{
    class ColorInfo
    {
        public string Name { get; }
        public Color Color { get; }
        public string HexValue => Color.ToString();
        public Brush Brush => new SolidColorBrush(Color);

        public ColorInfo(string name, Color color)
        {
            Name = GetTitleName(name);
            Color = color;
        }

        public override string ToString() => $"{Name}";

        string GetTitleName(string name)
        {
            var sb = new StringBuilder(name.Length + 3);
            foreach(var ch in name)
            {
                if (char.IsUpper(ch) && sb.Length > 0)
                    sb.Append(' ');
                sb.Append(ch);
            }
            return sb.ToString();
        }

        public static IEnumerable<ColorInfo> EnumerateAllColors()
        {
            foreach (var property in typeof(Colors).GetProperties())
            {
                var color = (Color) property.GetValue(null, null);
                yield return new ColorInfo(property.Name, color);
            }
        }
    }
}
 
投票 0 下注
G

GlassWizzard2

谢谢你们坚持我，我 将要 得到这个。我厌倦了google阻止我登录，因此我为该站点创建了一个真实帐户。

跳伞运动员，感谢您的示例，这对我进行检查非常有用（我还从您的C＃代码中学到了一两个新东西，我从不知道'yield'以及在foreach循环中使用方法！）

我将一次只迈出这一步，我将重做我以Sheepings所示方式给出的示例代码，然后从那里进行下一步。尝试这样做使我需要问一个问题：我应该使用标签还是文本块？还是没关系，（我确实在这个线程中说了一段时间标签，我习惯称它们为标签，但是我使用的是文本块）。我的印象是，除非特别需要标签的功能，否则应该始终使用文本块（是吗？），所以我很好奇我是否应该使用文本块？

我的下一个问题也是关于标签和文本块。我以您的示例为例，我所做的第一件事是添加了另一列和更多行，因此看起来像这样：

注释2020-01-10 132530.jpg


然后，我将标签更改为文本块，令我惊讶的是，它实际上将大小调整为如下所示：

注释2020-01-10 132619.jpg


我很好奇为什么大小改变了，好像没有应用边距？那是正常行为吗？我之前在文本块中使用了margin，并且没有任何问题。
 
投票 0 下注

类似线程

毁灭
  • 问题
问题 如何将Object类的属性与文本块绑定？
回覆
2
观看次数
279
毁灭
毁灭
jag250
  • 问题
问题 带单选按钮列表的每个循环
回覆
1
观看次数
163
金西尼
J
R
  • 问题
问题 在列表中查找重复项并跳过/删除该元素并替换
回覆
1
观看次数
138
羊皮
羊皮
奴隶
  • 问题
小费 将脱机语音界面添加到跨平台.NET GUI
回覆
5
观看次数
236
羊皮
羊皮
R
  • 问题
解决 在Web服务界面中处理错误
回覆
4
观看次数
410
罗伯特·NZ
R
最佳 底部