1. 首頁
  2. 問答
  3. 更有效地設計WPF中的表格網格

更有效地設計WPF中的表格網格

2013-10-10 26 views
0

enter image description here我需要顯示一個表格，顯示項目可以使用的可用類別以及當前數據上下文的每個類別中有多少記錄的計數。更有效地設計WPF中的表格網格

爲了簡單起見，類別名稱將在一個靜態類枚舉中，然後我將能夠通過類別名稱（字符串）在結果集中查找以確定計數。

我附加了我的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>

來源

2013-10-10 NZJames

+2

考慮顯示錶而不是xaml？ – Bolu

+0

這看起來好像更適合http：//codereview.stackexchange。com –

回答

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-10 11:37:10

0

而不是使用一個網格，大量的手動放置文本框自己創建一個表，你可以只使用爲這個做了一個工具：一個ListView其View集到GridView。

如果您有這些類別的視圖模型，您可以輕鬆地綁定到它們。它將在XAML中看起來像這樣。這裏Categories是您的數據上下文中的一些屬性，它是一個項目列表，它們本身有一個Name和Number屬性，您可以在GridViewColumn定義中綁定到該屬性。任何造型也可以使用GridViewColumn進行，或者如果您需要更特別的東西，您可以提供自定義CellTemplate。

<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-10 11:30:20 poke

+0

很好的話，這裏的策略是製作一個IList 屬性，將它綁定到ListView，然後使用數據模板來設置每個具有Name和Count字段的CategoryViewModel對象，每個「單元格」 ，然後在Gridview佈局上應用常規ListView樣式來獲得標題，網格線，邊框等？ – NZJames

+0

@ user1122909這聽起來不錯，是的。我已經修改了我的答案，給你一個它如何工作的例子。 – poke

0
  1. 佈局使用ItemControl與ItemTemlate。
  2. 樣式（前景，背景）使用樣式。
  3. 對於padding \ margin使用樣式設置而不是不必要的列。

來源

2013-10-10 11:32:04 dovid

相關問題

 相關問題