Home Forums WPF controls Xceed DataGrid for WPF Styling GroupHeader?

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • User (Old forums)
    Member
    Post count: 23064
    #22234 |

    Hello,

    I’m new to Xceed DataGrid, could you tell how to style Group Header in order it looks like the Live Explorer? Could you give an example?

    I tried to group the items in codebehind, but I saw that the group header rows did not span the full row’s width. When all the group headers collapsed, I saw some of group header rows were on a same line. Could you tell what’s the problem? How can I fix it?

    Thanks,
    Chinh

    Imported from legacy forums. Posted by Chinh (had 6283 views)

    Xceed Support
    Member
    Post count: 5658

    Hi Chinh,

    You can customize the way the GroupHeaderControl looks by changing its ControlTemplate… You can do so by creating an implicit style for the GroupHeaderControl in a resource dictionary above or at the DataGridControl’s Level:

    <code>
    <Window.Resources>
    <Style TargetType=”{x:Type xcdg:GroupHeaderControl}>
    <Setter Property=”Template”>
    <Setter.Value>
    <ControlTemplate>
    <!– customize your look here –>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    </Window.Resources>
    </code>

    You can see the way we created our GroupHeaderControl styles/templates in the “themes” subfolder of the Xceed DataGrid for WPF 1.0 installation folder.

    As for the problem you are refering to… If all groups are collapsed, the GroupHeaderControl will effectivelly “shrink” to occupy as little place as possible. You can change this behavior by setting a binding on the GroupHeaderControl’s MinWidth property (<a href=”http://forums.xceed.com/forums/ShowPost.aspx?PostID=5775″>see this post</a> under the “stretching data rows” sub-topic)

    Imported from legacy forums. Posted by Marcus [Xceed] (had 533 views)

    User (Old forums)
    Member
    Post count: 23064

    Hi Marcus,

    1. I added this code block and it worked great, the group headers now stretch the full width. Thanks a lot.

    Style x:Key=”tableViewGroupHeaderStyle”
    TargetType=”{x:Type xcdg:GroupHeaderControl}”>
    <Setter Property=”MinWidth” Value=”{Binding RelativeSource={RelativeSource AncestorType={x:Type ScrollContentPresenter}}, Path=ActualWidth}”/>
    </Style>

    2. I have another question regarding the height of GroupHeader: The height is not fixed, it varies when I expand/collapse the groups; especially in card view, the height always stretch the same height with the cards. I tried to set MinHeight, MaxHeight for GroupHeaderControl but it’s not resolved. Please advice?

    Thanks,
    Chinh

    Imported from legacy forums. Posted by Chinh (had 665 views)

    Xceed Support
    Member
    Post count: 5658

    2:

    Have you modified the GroupHeaderControl template or style?

    If yes, can you provide the xaml code? if no, can you provide more details on how does the GroupHeaderControl stretches to the Card’s height (context, examples, …)

    Imported from legacy forums. Posted by Marcus [Xceed] (had 551 views)

    User (Old forums)
    Member
    Post count: 23064

    I followed your samples to switch the view (from table view to card view and vice versa) in codebehind. Here are style for DataRow and GroupHeaderControl in the ResourceDictionary file:

    <Style x:Key=”cardViewDataRowStyle” TargetType=”{x:Type xcdg:DataRow}”>
    <!– Set the Row’s background to Transparent to make it hit-testable
    while preserving the background drawn by the underlying DataGridControl. –>
    <Setter Property=”Background” Value=”Transparent”/>
    <Setter Property=”Template” Value=”{StaticResource cardViewDataRowTemplate}”/>
    <!– The current item is very obvious without the FocusVisualStyle, disable it. –>
    <Setter Property=”FocusVisualStyle” Value=”{x:Null}”/>
    </Style>

    <Style x:Key=”cardViewGroupHeaderStyle” TargetType=”{x:Type xcdg:GroupHeaderControl}”>
    <Setter Property=”MinWidth” Value=”{Binding RelativeSource={RelativeSource AncestorType={x:Type ScrollContentPresenter}}, Path=ActualWidth}”/>
    </Style>

    In codebehind

    this.Resources.Remove(typeof(Xceed.Wpf.DataGrid.DataRow));
    this.Resources.Add(typeof(Xceed.Wpf.DataGrid.DataRow), this.FindResource(“cardViewDataRowStyle”));

    resource = this.FindResource(“cardViewDataRowStyle”);
    this.Resources.Remove(typeof(Xceed.Wpf.DataGrid.GroupHeaderControl));
    this.Resources.Add(typeof(Xceed.Wpf.DataGrid.GroupHeaderControl), this.FindResource(“cardViewGroupHeaderStyle”));

    “GroupHeaderControl stretches to the Card’s height” I meant on the card view, the height of the row displaying the group header equals to the height of the cards. When I collapsed all the headers, the height of all group headers (in collapsed mode) automatically reduced.

    Please advice?
    Chinh

    Imported from legacy forums. Posted by Chinh (had 703 views)

    User (Old forums)
    Member
    Post count: 23064

    Hi Marcus,

    Here is the screenshot of grouping the card view.

    http://farm1.static.flickr.com/50/414454070_4a3e3e0796_o.gif

    Please help me to resolve?

    Thanks,
    Chinh

    Imported from legacy forums. Posted by Chinh (had 606 views)

    Xceed Support
    Member
    Post count: 5658

    A questions pops into my header when I looked at the picture?

    Have you changed the Orientation property of the VirtualizingCardPanel to horizontal?

    If the answer is yes, then that is the reason…

    One of the concept behind the VirtualizingCardPanel is that to preserve as much consistency as possible with the cards, it arranges all its child using the same Width (or when the Orientation is Horizontal, with the same Height).

    Imported from legacy forums. Posted by Marcus [Xceed] (had 552 views)

    User (Old forums)
    Member
    Post count: 23064

    Hello Marcus,

    You’re great! That’s it.

    But I still wonder if we can still set Orientation property of the VirtualizingCardPanel to horizontal and reduce the height of the GroupHeader? Moreover, the width of GroupHeader should not be shrunk to the card’s width, GroupHeader should be stretched the full width of DataGrid?

    Please advice?
    Chinh

    Imported from legacy forums. Posted by Chinh (had 643 views)

    Xceed Support
    Member
    Post count: 5658

    Unfortunately, in the current state of things, there is no way that the GroupHeaderControl can have a height different that that of the cards (they are forced to share the same height by the ArrangeOverride() of the VirtualizingCardPanel).

    As for the Width, it will not be affected by the ArrangeOverride() of the VCardPanel, therefore it remains flexible.

    Imported from legacy forums. Posted by Marcus [Xceed] (had 5742 views)

    User (Old forums)
    Member
    Post count: 23064

    Hi Marcus,

     is there a way, then, to write a MyCardPanel class derived from DataGridVirtualizingPanel in order to change the ArrangeOverride ? I tried to do it without success : i can’t find the way to display items…

    Here’s the code for MyCardPanel class and the way a define it in xaml side :

     

    public

    class MyCardPanel : DataGridVirtualizingPanel, ICustomVirtualizingPanel

    {

    protected override Size ArrangeOverride(Size finalSize)

    {

    IItemContainerGenerator customItemContainerGenerator = base.CustomItemContainerGenerator;

    UIElementCollection internalChildren = base.InternalChildren;

    for (int i = 0; i < base.Children.Count; i++)

    {

    UIElement element = internalChildren[i];

    element.Arrange(new Rect(0, 0, 500, 500));

    }

    return finalSize;

    }

    protected override void BringIndexIntoView(int index)

    {

    this.MakeVisible(index, new Rect(0.0, 0.0, 0.0, 0.0));

    }

    public Rect MakeVisible(int index, Rect rectangle)

    {

    base.InvalidateMeasure();

    return rectangle;

    }

    protected override Size MeasureOverride(Size availableSize)

    {

    return new Size(500.0, 500.0);

    }

     

    #region

    ICustomVirtualizingPanel Members

    public void BringIntoView(int index)

    {

    this.BringIndexIntoView(index);

     

    }

    #endregion

    }

     

    <

    xcdg:DataGridControl.ItemsPanel>

    <ItemsPanelTemplate>

    <local:MyCardPanel IsItemsHost=”True”/>

    </ItemsPanelTemplate>

    </xcdg:DataGridControl.ItemsPanel>

     

    This code has been written in the samples you provide (Xceed.Wpf.DataGrid.Samples.CustomViews)

    What do i need to do in order to have my items displayed. 

     

    Thanks a lot,

    Albert.

    Imported from legacy forums. Posted by Albert (had 891 views)

    Xceed Support
    Member
    Post count: 5658

    Hi Albert,

      Writing a Panel that interacts with an ItemsControl (or more specifically the DataGridControl). Is much more complex than what most people think…

      You have a good starting point (deriving from DataGridVirtualizingPanel). However, a lot of things are missing ( Generation of containers, cleanup of unused containers, IScrollInfo implementation, … ).

      If you want to have a good overview on how to create yourself a VirtualizingPanel, I recommend reading both DAn Crevier’s and Ben Constable’s series on the subject. While these articles were written more than 2 years ago, I still consider them as excellent references on the topic ( in fact, the best there is).

      Building a VirtualizingPanel:

      http://blogs.msdn.com/dancre/archive/2006/02/06/526310.aspx

      http://blogs.msdn.com/dancre/archive/2006/02/13/531550.aspx

      http://blogs.msdn.com/dancre/archive/2006/02/14/532333.aspx

      http://blogs.msdn.com/dancre/archive/2006/02/16/533870.aspx
     

       IScrollInfo:

       http://blogs.msdn.com/bencon/archive/2006/01/05/509991.aspx

       http://blogs.msdn.com/bencon/archive/2006/01/06/510355.aspx

       http://blogs.msdn.com/bencon/archive/2006/01/07/510530.aspx

       http://blogs.msdn.com/bencon/archive/2006/12/09/iscrollinfo-tutorial-part-iv.aspx

       There is also the Dr. WPF article on Panel, which is pretty neat (and will cross-reference the articles above).

       http://drwpf.com/blog/Home/tabid/36/EntryID/28/Default.aspx  

    Imported from legacy forums. Posted by Marcus [Xceed] (had 2271 views)

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.