Question

我正在尝试创建一个类似于＆＃39;的电子表格。带有列标题的网格，显示来自一组播放器对象的信息，其中单元格内容的大小最大化。为此，我有一个绑定到ListView对象集合的Player的UWP应用程序。 ListView.ItemsPanel使用从here

获得的UniformGridPanel

UniformGridPanel有一个Rows属性绑定到玩家数量，可以改变，一个列。 UniformGridPanel用于显示所有玩家，给予每个玩家项目相同的高度，因此没有玩家被部分显示且没有滚动。 UniformGridPanel工作正常。

ListView.ItemTemplate是固定数量列的Grid，代表每个玩家的数据。

我的问题是：

每个＆＃39; Cell＆＃39;中的信息。不够大。我希望每个小组都有一个小组。内容最大化，网格布局保持电子表格，即方形，行和列对齐。
我不知道如何将标题放在与每列中的单元格对齐的每个列上。

所以显示如下所示。这是最接近我想要的，但是对于单元格内容和列标题的大小。

正如你所看到的那样，有足够的空间来增加数字和字母。我在XAML中使用Viewbox尝试了很多变体。例如，将ListView包裹在Viewbox中会产生这种情况，因为列未对齐，这是不好的。

如果我在每个Viewbox控件上放置Border来定义一个＆＃39;单元格＆＃39;我的布局仍然存在问题。

我已经用WPF标记了这篇文章，尽管我的问题是在UWP上下文中，以防有人在该域中有类似的经验可以在这里应用。

如果有人能提供帮助，我将非常感激。

非常感谢提前。

背后的代码：

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();

        ObservableCollection<Player> players = new ObservableCollection<Player>();

        players.Add(new Player("John", "Smith",1,99,11,1));
        players.Add(new Player("Fred", "Blogs", 19, 25, 11, 1));
        players.Add(new Player("Andrew", "Sykes", 19, 25, 11, 2));
        players.Add(new Player("Dean", "Andrews", 19, 179, 11, 1));

        this.DataContext = players;
    }
}

XAML：

<Grid x:Name="root" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Grid x:Name="grdPlayers" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <!--<Viewbox VerticalAlignment="Stretch" HorizontalAlignment="Stretch" StretchDirection="Both" Stretch="Fill">-->
        <ListView  x:Name="lvwPlayers"
                Padding="0"
                BorderBrush="Red"
                BorderThickness="5"
                            ItemsSource="{Binding}"
                            SelectionMode="None"
                            ScrollViewer.VerticalScrollMode="Disabled"
                            ScrollViewer.VerticalScrollBarVisibility="Hidden"
                            ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
                            ScrollViewer.HorizontalScrollMode="Disabled"
                            VerticalAlignment="Stretch"
                            VerticalContentAlignment="Stretch"
                            HorizontalAlignment="Stretch"
                            HorizontalContentAlignment="Stretch">


            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                </Style>
            </ListView.ItemContainerStyle>

            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <local:UniformGrid x:Name="pnlPlayer" Rows="{Binding Count}" Columns="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>


            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid x:Name="grdPlayerRow">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Border Grid.Column="0" BorderBrush="Black" BorderThickness="1"  Background="Green" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <TextBlock Text="{Binding Initials}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                        </Border>
                        <Border Grid.Column="1" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <TextBlock Text="{Binding HighScore}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                        </Border>
                        <Border Grid.Column="2" BorderBrush="Black" BorderThickness="1"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <TextBlock Text="{Binding LowScore}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                        </Border>
                        <Border Grid.Column="3" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <TextBlock Text="{Binding Average}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                        </Border>
                        <Border Grid.Column="4" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <TextBlock Text="{Binding TonCount}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                        </Border>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <!--</Viewbox>-->
    </Grid>
</Grid>

球员代码：

public class Player : INotifyPropertyChanged
{

    public Player(string firstName, string lastName, int low, int high, int avg, int tonCount)
    {
        FirstName = firstName;
        LastName = lastName;
        LowScore = low;
        HighScore = high;
        Average = avg;
        TonCount = tonCount;
    }

    protected void OnPropertyChanged([CallerMemberName] string caller = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(caller));
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private int _tonCount;
    public int TonCount
    {
        get { return _tonCount; }
        set
        {
            _tonCount = value;
            OnPropertyChanged();
        }
    }


    private double _average;
    public double Average
    {
        get { return _average; }
        set
        {
            _average = value;
            OnPropertyChanged();
        }
    }

    private int _lowScore;
    public int LowScore
    {
        get { return _lowScore; }
        set
        {
            _lowScore = value;
            OnPropertyChanged();
        }
    }

    private int _highScore;
    public int HighScore
    {
        get { return _highScore; }
        set
        {
            _highScore = value;
            OnPropertyChanged();
        }
    }


    public string FullName
    {
        get { return $"{FirstName} {LastName}"; }
    }

    private string _firstName = string.Empty;
    public string FirstName
    {
        get { return _firstName; }
        set
        {
            _firstName = value;
            OnPropertyChanged();
            OnPropertyChanged("Initials");
        }
    }

    private string _lastName = string.Empty;
    public string LastName
    {
        get { return _lastName; }
        set
        {
            _lastName = value;
            OnPropertyChanged();
            OnPropertyChanged("Initials");
        }
    }

    public string Initials
    {
        get
        {
            return FirstName.Substring(0, 1) + LastName.Substring(0, 1).ToUpper();
        }
    }

    public override string ToString()
    {
        return FullName;
    }
}

更新：

@Grace Feng，你在分配DataContext之前使用lvwPlayers加载事件的答案给出了以下输出，这不是我想要的。首先，行无可争议地处于不同的高度？：

Answer 1

根据您的描述，我认为无需使用UniformGridPanel，您只需自定义Grid即可使其高度等于其宽度。例如，像这样创建一个TemplatedControl：

public sealed class SquareGrid : Grid
{
    public SquareGrid()
    {
        this.Loaded += SquareGrid_Loaded;
    }

    private void SquareGrid_Loaded(object sender, RoutedEventArgs e)
    {
        this.Height = this.ActualWidth;
    }
}

对于＆＃34;我不知道如何将每个列上的标题与每列中的单元格对齐。＆＃34;，我认为你可以将它们设置为Header的{{1}}。但是，使用ListView使ViewBox填充大小非常明智。这是演示：

Text

渲染图片：

在UWP项目中使用Viewbox和ListView获取电子表格网格的问题

1 个答案: