Question

我正在尝试显示类似记分板的内容，团队名称占据广场的前25％，得分低于75％（适当的字体比率）。我也希望这些控件在窗口调整大小时增长/缩小。

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

中

这会导致应用程序进入＆＃34;中断模式＆＃34;。

这显示了问题：

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

如果有更好的解决方案，我将非常感激：）

Answer 1

我不确定我是否完全理解你的问题。如果您希望保持名称和分数之间的比率相同，则可以使用＆＃34; *＆＃34;名称（25％）和＆＃34; 3 *＆＃34;得分（75％）。您还可以将每个TextBlock放在Viewbox中而不是整个内容中。为了简单起见，我用硬编码字符串替换了转换器和绑定。

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

Answer 2

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

我在没有绑定的情况下测试了你的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>

希望这有帮助！

StackPanel内的WPF ViewBox

2 个答案: