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>

このアイテム コントロールは、水平ラップ パネルを使用して、カテゴリが表面全体にラップされ、現在の行で割り当てられたスペースがなくなると新しい行を開始します。

アイテム テンプレートには、アイテムの表示に使用できる 2 つのバインドされたテキスト ブロックがあります。コントロール自体は、カテゴリ数のコレクションにバインドされています。

コンテナクラスは次のようになります...

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

最後に、View Model は次のようになります...

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

グリッドと手動で配置された多数のテキスト ボックスを使用して自分でテーブルを作成する代わりに、このために作成されたツールを使用することができます: ViewがGridViewに設定されたListView。

これらのカテゴリのビュー モデルがあれば、簡単にバインドできます。XAML では次のようになります。これは、定義でバインドするプロパティとプロパティを持つCategories項目のリストです。を使用して任意のスタイリングを行うこともできます。さらに特別なものが必要な場合は、カスタム を提供できます。NameNumberGridViewColumnGridViewColumnCellTemplate

<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 に答える