StackPanel内的WPF ViewBox

我试图展示像记分板一样的东西，团队名称在前方的25％，得分低于75％（适当的字体比率） . 我也希望这些控件在窗口调整大小时增长/缩小 .

为此，我创建了一个网格并将其拆分为 * 和 3* 行 . 我在顶行添加了一个TextBlock，在底部4行添加了另一个TextBlock . 然后我将每个TextBox包装在ViewBox中

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

这显示了问题：

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

这似乎是由ListPanel用作ListView的ItemsPanelTemplate引起的（没有这个StackPanel一切正常，但布局不是很理想） . 但是，我不知道另一种使ListView水平的方法，所以我坚持使用StackPanel .

经过一些实验和阅读ViewBox如何工作，以及StackPanels如何表现我得到了一些解决方案（可能不是最好的解决方案） .
我将ListView包装在Border中，然后将ListView的DataTemplate中Border的高度绑定到Border外部的高度 .
因此存在一个小的限制 - 主要是顶部/底部边距导致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>

如果有更好的解决方案，我会非常感激:)