StackPanel内部的WPF ViewBox

我试图显示一个类似记分板的东西，团队名称位于正方形的前25%，分数占低75%，字体比例适当。我还希望这些控件随着窗口的大小而增长/收缩

为此，我创建了一个网格，并将其拆分为*行和3*行。我在第一行添加了一个文本块，在第四行添加了另一个文本块。然后我将每个文本框包装在一个视图框中

这会导致应用程序进入中断模式

这说明了一个问题：

<Window x:Class="WpfRandoms.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:WpfRandoms"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="3*"/>
        </Grid.RowDefinitions>

        <ListView ItemsSource="{Binding Teams}" HorizontalAlignment="Center" Grid.Row="0" BorderBrush="{x:Null}" Background="{x:Null}">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemContainerStyle>
                <Style TargetType="{x:Type ListViewItem}">
                    <Setter Property="Background" Value="Transparent" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ListViewItem}">
                                <ContentPresenter />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Border Margin="10" Padding="10" CornerRadius="5" Width="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="3*" />
                            </Grid.RowDefinitions>
                            <Viewbox Grid.Row="0">
                                <TextBlock Text="{Binding Name}" TextAlignment="Center" />
                            </Viewbox>
                            <Viewbox Grid.Row="1">
                                <TextBlock Text="{Binding Score}" FontSize="40" TextAlignment="Center" />
                            </Viewbox>
                        </Grid>
                    </Border>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Window>

代码隐藏：

using System.Collections.Generic;
using System.Windows;

namespace WpfRandoms
{
    public partial class MainWindow : Window
    {
        public class Team
        {
            public string Name { get; set; }
            public int Score { get; set; }
        }

        public IList<Team> Teams { get; private set; }

        public MainWindow()
        {
            InitializeComponent();

            Teams = new List<Team>();
            Teams.Add(new Team() { Name = "Team A", Score = 78 });
            Teams.Add(new Team() { Name = "Team B", Score = 1 });
            Teams.Add(new Team() { Name = "Team C", Score = 101 });

            DataContext = this;
        }
    }
}

这似乎是由StackPanel用作ListView的ItemsPanelTemplate造成的，没有此StackPanel，一切正常，但布局不符合要求。但是，我不知道还有另一种使ListView水平的方法，所以我只能使用StackPanel

在对ViewBox的工作原理以及StackPanels的行为进行了一些实验和阅读之后，我找到了一些可能不是最好的解决方案。 我将ListView包装在边框中，然后将ListView的DataTemplate内的边框高度绑定到该外部边框的高度。 因此存在一个小的限制-主要是上/下边距会导致ListView的元素被修剪。为了避免这种修剪，我在DataTemplate内的边框中添加了填充，然后在其中添加了一个较小的边框，该边框具有背景等。 我还必须隐藏ListView的垂直滚动条。 以下是我所拥有的：

<Window x:Class="WpfRandoms.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="3*"/>
        </Grid.RowDefinitions>

        <Border x:Name="MyBorder" Margin="10" Grid.Row="0">
            <ListView ItemsSource="{Binding Teams}" HorizontalAlignment="Center" VerticalAlignment="Stretch" BorderBrush="{x:Null}" Background="{x:Null}" ScrollViewer.VerticalScrollBarVisibility="Hidden">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.ItemContainerStyle>
                    <Style TargetType="{x:Type ListViewItem}">
                        <Setter Property="Background" Value="Transparent" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ListViewItem}">
                                    <ContentPresenter />
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Border Margin="10, 0" Padding="10" Height="{Binding ActualHeight, ElementName=MyBorder}" Width="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}">
                            <Border Background="AliceBlue" CornerRadius="5">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="3*" />
                                    </Grid.RowDefinitions>
                                    <Viewbox Grid.Row="0">
                                        <TextBlock Text="{Binding Name}" TextAlignment="Center"/>
                                    </Viewbox>
                                    <Viewbox Grid.Row="1">
                                        <TextBlock Text="{Binding Score}" FontSize="40" TextAlignment="Center"/>
                                    </Viewbox>
                                </Grid>
                            </Border>
                        </Border>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Border>
    </Grid>
</Window>

---

如果有更好的解决方案，我将不胜感激：

我认为您在boarder控件上引用的转换器可能有问题

我在没有绑定的情况下测试了XAML，并且视图框按预期工作

 <Border Margin="10" Padding="10" CornerRadius="5" Width="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}">
        <Viewbox>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <TextBlock Text="Team Name" TextAlignment="Center" Grid.Row="0" />
                <TextBlock Text="100" FontSize="100" TextAlignment="Center" Grid.Row="1" Grid.RowSpan="3"/>
            </Grid>
        </Viewbox>
    </Border>

---

希望这有帮助

我不确定我是否完全理解你的问题。如果你想保持名字和分数之间的比例相同，你可以用*表示名字的25%，用3*表示分数的75%。您还可以将每个文本块放在一个视图框中，而不是放在整个文本框中。为了保持简单，我用硬编码字符串替换了转换器和绑定

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Border Margin="10" Padding="10" CornerRadius="5" Background="Coral">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="3*" />
            </Grid.RowDefinitions>
            <Viewbox Grid.Row="0">
                <TextBlock Text="Home" TextAlignment="Center" />
            </Viewbox>
            <Viewbox Grid.Row="1" >
                <TextBlock Grid.Row="1" Text="25" TextAlignment="Center" />
            </Viewbox>
        </Grid>
    </Border>
</Grid>

---

我同样移除了绑定，但仍然进入了中断模式。如果在ListView.ItemTemplate.DataTemplate中，会有什么不同吗？这就是现在的情况，因为我有一个团队扫描列表，您发布了所有XAML？同样，一旦我将文本框包装到与代码相同的视图框中，我得到的应用程序将在VisualStudio中显示一条中断模式消息。