0

在此处输入图像描述我需要显示一个表格，其中显示项目可以属于的可用类别以及当前数据上下文的每个类别中有多少记录的计数。

为简单起见，类别名称将位于静态类枚举中，然后我将能够按类别名称（字符串）在我的结果集中查找以确定计数。

我附上了我用来按我想要的方式设置表格样式的 XAML，但我不禁认为必须有一种更优雅的方式。有没有人有任何指示？

<SolidColorBrush x:Key="SubTableHeading" Color="#BAA6BA" />
<SolidColorBrush x:Key="SubTableHeaderText" Color="#FFFFFF" />
<SolidColorBrush x:Key="SubTableText" Color="#888888" />
<SolidColorBrush x:Key="SubTableRow" Color="#FFFCFF" />
<SolidColorBrush x:Key="SubTableAlternateRow" Color="#FAEEFF" />
<SolidColorBrush x:Key="SubTableHighlightCell" Color="#EADEEF" />

<Grid Grid.Row="0" Grid.Column="1" Grid.RowSpan="7" Background="{StaticResource SubTableHeading}">
        <Grid.RowDefinitions>
            <RowDefinition Height="18" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock Grid.Column="0" Text="Category breakdown" Padding="5,2,5,2" Foreground="{StaticResource SubTableHeaderText}" />
        <Grid Grid.Row="1" Background="{StaticResource SubTableRow}" >
            <Grid.RowDefinitions>
                <RowDefinition Height="13" />
                <RowDefinition Height="13" />
                <RowDefinition Height="13" />
                <RowDefinition Height="13" />
                <RowDefinition Height="13" />
                <RowDefinition Height="13" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="5" />
                <ColumnDefinition Width="105" />
                <ColumnDefinition Width="25" />
                <ColumnDefinition Width="10" />
                <ColumnDefinition Width="105" />
                <ColumnDefinition Width="25" />
                <ColumnDefinition Width="10" />
                <ColumnDefinition Width="110" />
                <ColumnDefinition Width="25" />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="1" Grid.Row="0" Foreground="{StaticResource SubTableText}">Category name</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="1" Foreground="{StaticResource SubTableText}">Category name</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="2" Foreground="{StaticResource SubTableText}">Category name</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="3" Foreground="{StaticResource SubTableText}">Category name</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="4" Foreground="{StaticResource SubTableText}">Category name</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="5" Foreground="{StaticResource SubTableText}">Category name</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="0" Width="25" Background="{StaticResource SubTableHighlightCell}" Foreground="{StaticResource SubTableText}" TextAlignment="Center">1</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="1" Width="25" Background="{StaticResource SubTableHighlightCell}" Foreground="{StaticResource SubTableText}" TextAlignment="Center">1</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="2" Width="25" Background="{StaticResource SubTableHighlightCell}" Foreground="{StaticResource SubTableText}" TextAlignment="Center">1</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="3" Width="25" Background="{StaticResource SubTableHighlightCell}" Foreground="{StaticResource SubTableText}" TextAlignment="Center">1</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="4" Width="25" Background="{StaticResource SubTableHighlightCell}" Foreground="{StaticResource SubTableText}" TextAlignment="Center">1</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="5" Width="25" Background="{StaticResource SubTableHighlightCell}" Foreground="{StaticResource SubTableText}" TextAlignment="Center">1</TextBlock>
            <TextBlock Grid.Column="4" Grid.Row="0" Foreground="{StaticResource SubTableText}">Category name</TextBlock>
            <TextBlock Grid.Column="4" Grid.Row="1" Foreground="{StaticResource SubTableText}">Category name</TextBlock>
            <TextBlock Grid.Column="4" Grid.Row="2" Foreground="{StaticResource SubTableText}">Category name</TextBlock>
            <TextBlock Grid.Column="4" Grid.Row="3" Foreground="{StaticResource SubTableText}">Category name</TextBlock>
            <TextBlock Grid.Column="4" Grid.Row="4" Foreground="{StaticResource SubTableText}">Category name</TextBlock>
            <TextBlock Grid.Column="4" Grid.Row="5" Foreground="{StaticResource SubTableText}">Category name</TextBlock>
            <TextBlock Grid.Column="5" Grid.Row="0" Width="25" Background="{StaticResource SubTableHighlightCell}" Foreground="{StaticResource SubTableText}" TextAlignment="Center">1</TextBlock>
            <TextBlock Grid.Column="5" Grid.Row="1" Width="25" Background="{StaticResource SubTableHighlightCell}" Foreground="{StaticResource SubTableText}" TextAlignment="Center">1</TextBlock>
            <TextBlock Grid.Column="5" Grid.Row="2" Width="25" Background="{StaticResource SubTableHighlightCell}" Foreground="{StaticResource SubTableText}" TextAlignment="Center">1</TextBlock>
            <TextBlock Grid.Column="5" Grid.Row="3" Width="25" Background="{StaticResource SubTableHighlightCell}" Foreground="{StaticResource SubTableText}" TextAlignment="Center">1</TextBlock>
            <TextBlock Grid.Column="5" Grid.Row="4" Width="25" Background="{StaticResource SubTableHighlightCell}" Foreground="{StaticResource SubTableText}" TextAlignment="Center">1</TextBlock>
            <TextBlock Grid.Column="5" Grid.Row="5" Width="25" Background="{StaticResource SubTableHighlightCell}" Foreground="{StaticResource SubTableText}" TextAlignment="Center">1</TextBlock>
            <TextBlock Grid.Column="7" Grid.Row="0" Foreground="{StaticResource SubTableText}">Category name</TextBlock>
            <TextBlock Grid.Column="7" Grid.Row="1" Foreground="{StaticResource SubTableText}">Category name</TextBlock>
            <TextBlock Grid.Column="7" Grid.Row="2" Foreground="{StaticResource SubTableText}">Category name</TextBlock>
            <TextBlock Grid.Column="7" Grid.Row="3" Foreground="{StaticResource SubTableText}">Category name</TextBlock>
            <TextBlock Grid.Column="7" Grid.Row="4" Foreground="{StaticResource SubTableText}">Category name</TextBlock>
            <TextBlock Grid.Column="7" Grid.Row="5" Foreground="{StaticResource SubTableText}">Category name</TextBlock>
            <TextBlock Grid.Column="8" Grid.Row="0" Width="25" Background="{StaticResource SubTableHighlightCell}" Foreground="{StaticResource SubTableText}" TextAlignment="Center">1</TextBlock>
            <TextBlock Grid.Column="8" Grid.Row="1" Width="25" Background="{StaticResource SubTableHighlightCell}" Foreground="{StaticResource SubTableText}" TextAlignment="Center">1</TextBlock>
            <TextBlock Grid.Column="8" Grid.Row="2" Width="25" Background="{StaticResource SubTableHighlightCell}" Foreground="{StaticResource SubTableText}" TextAlignment="Center">1</TextBlock>
            <TextBlock Grid.Column="8" Grid.Row="3" Width="25" Background="{StaticResource SubTableHighlightCell}" Foreground="{StaticResource SubTableText}" TextAlignment="Center">1</TextBlock>
            <TextBlock Grid.Column="8" Grid.Row="4" Width="25" Background="{StaticResource SubTableHighlightCell}" Foreground="{StaticResource SubTableText}" TextAlignment="Center">1</TextBlock>
            <TextBlock Grid.Column="8" Grid.Row="5" Width="25" Background="{StaticResource SubTableHighlightCell}" Foreground="{StaticResource SubTableText}" TextAlignment="Center">1</TextBlock>
        </Grid>
    </Grid>
4

3 回答 3

1

您可以更改布局以使用 ItemsControl。这是一个原型（没有你的样式）......

    <ItemsControl ItemsSource="{Binding MyCollection}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal" MaxWidth="450"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" MaxWidth="150">
                    <TextBlock Width="90" Text="{Binding CategoryName}" Margin="0,0,10,0"/>
                    <TextBlock Width="50" Text="{Binding CategoryCount}"/>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

此项目控件使用水平环绕面板，以便您的类别被包裹在表面上，并且当当前行上的分配空间用尽时将开始新行。

项目模板有两个可用于显示项目的绑定文本块。控件本身绑定到您的类别计数的集合。

容器类看起来像这样......

public class CategoryCounts: INotifyPropertyChanged
{
    private int _categoryCount;
    public int CategoryCount
    {
        [DebuggerStepThrough]
        get { return _categoryCount; }
        [DebuggerStepThrough]
        set
        {
            if (value != _categoryCount)
            {
                _categoryCount = value;
                OnPropertyChanged("CategoryCount");
            }
        }
    }
    private string _categoryName;
    public string CategoryName
    {
        [DebuggerStepThrough]
        get { return _categoryName; }
        [DebuggerStepThrough]
        set
        {
            if (value != _categoryName)
            {
                _categoryName = value;
                OnPropertyChanged("CategoryName");
            }
        }
    }
}

最后，视图模型看起来像这样......

public class ViewModel:INotifyPropertyChanged
{
    public ObservableCollection<CategoryCounts> MyCollection { get; set; }
    public ViewModel()
    {
        MyCollection = new ObservableCollection<CategoryCounts>();
        MyCollection.Add(new CategoryCounts{CategoryName = "some category", CategoryCount = 22});
    }
    #region INotifyPropertyChanged Implementation
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string name)
    {
        var handler = System.Threading.Interlocked.CompareExchange(ref PropertyChanged, null, null);
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }
    #endregion
}

您可以使用 DataGrid 或 ListView 获得几乎相同的结果，但“环绕”效果将失效，因为网格使用垂直方向延伸的“每行记录”，并使用适当的列标题等进行布局。

于 2013-10-10T11:37:10.530 回答
0

与其使用网格和大量手动放置的文本框自己创建表格，不如使用为此而设计的工具：一个ListView，其View设置为GridView。

如果您有这些类别的视图模型，您可以轻松地绑定到它们。它在 XAML 中看起来像这样。这Categories是您的数据上下文中的一些属性，它是一个项目列表，这些项目本身具有一个您在定义中绑定Name的属性。任何样式也可以使用 . ，或者如果您需要更特别的东西，您可以提供自定义.NumberGridViewColumnGridViewColumnCellTemplate

<ListView ItemsSource="{Binding Categories}">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Category" DisplayMemberBinding="{Binding Name}" />
            <GridViewColumn Header="Number" DisplayMemberBinding="{Binding Number}" />
        </GridView>
    </ListView.View>
</ListView>
于 2013-10-10T11:30:20.827 回答
0
  1. 对于布局，使用 ItemControl 和 ItemTemplate。
  2. 对于样式（前景、背景），请使用样式。
  3. 对于 padding\margin 使用样式设置而不是不必要的列。
于 2013-10-10T11:32:04.100 回答