ColumnHeaderContainer

8 posts, 0 answers
  1. Yevgeny
    Yevgeny avatar
    4 posts
    Member since:
    Jun 2010

    Posted 07 Jan 2014 Link to this post

    Hi,

    I'm trying to change column headers style in my GanttView.
    I'm using this code:
    <Style TargetType="GanttView:ColumnHeaderContainer">
                <Setter Property="Foreground" Value="#3d3d3d" />
                <Setter Property="Background" Value="#C0C0C0" />
            </Style>

    But that style impacts only 1st and 3d columns, while 2nd column style is not impacted (see attachment).

    What am I missing?

    Thanks,
    Yevgeny
     
  2. Kalin
    Admin
    Kalin avatar
    1209 posts

    Posted 08 Jan 2014 Link to this post

    Hello Yevgeny,

    The GanttView provides alternating background colors for the columns as well as the rows. That is why the background is affecting only the odd columns. In order to change the background of the even columns you will also need to set the AlternatingBackground property of the ColumnHeaderContainer to the same color. In your scenario the Style should look as follows:

    <Style TargetType="telerik:ColumnHeaderContainer">
        <Setter Property="Foreground" Value="#3d3d3d" />
        <Setter Property="Background" Value="#C0C0C0" />
        <Setter Property="AlternatingBackground" Value="#C0C0C0" />
    </Style>

    Hope this helps. If you have any other questions, let us know.

    Regards,
    Kalin
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Yevgeny
    Yevgeny avatar
    4 posts
    Member since:
    Jun 2010

    Posted 08 Jan 2014 Link to this post

    Thank you very much, it's working.

    I have another question:

    I'm trying set background and border on rows on the TimeRuller part and on cells on the Grid part, but getting some weird result (see attachment). Here is my code:

    <SolidColorBrush x:Key="GantBackgroundBrush" Color="#7c7c7c"/>
        <SolidColorBrush x:Key="GantGridTitleBackgroundBrush" Color="#C0C0C0"/>
        <SolidColorBrush x:Key="GantSelectedItemBrush" Color="#C0C0C0"/>
        <SolidColorBrush x:Key="GantGridTitleForegroundBrush" Color="#3d3d3d"/>
        <SolidColorBrush x:Key="GantRowBorderBrush" Color="#bbbbbb"/>
        <SolidColorBrush x:Key="GantFontBrush" Color="#6d6c6c"/>
        <SolidColorBrush x:Key="GantRowBackroundBrush" Color="#f4f4f4"/>
     
    <Style TargetType="GanttView:ColumnHeaderContainer">
                <Setter Property="Foreground" Value="{DynamicResource GantGridTitleForegroundBrush}" />
                <Setter Property="Background" Value="{DynamicResource GantGridTitleBackgroundBrush}" />
                <Setter Property="AlternatingBackground" Value="{DynamicResource GantGridTitleBackgroundBrush}" />
            </Style>
            <Style TargetType="telerik:BorderContainer">
                <Setter Property="Foreground" Value="{DynamicResource GantFontBrush}" />
                <Setter Property="Background" Value="{DynamicResource GantRowBackroundBrush}" />
                <Setter Property="BorderThickness" Value="{DynamicResource LangDict_GanttRowBorderSize}" />
                <Setter Property="BorderBrush" Value="{DynamicResource GantRowBorderBrush}" />
            </Style>
            <Style TargetType="telerik:AlternatingBorderContainer">
                <Setter Property="Foreground" Value="{DynamicResource GantFontBrush}" />
                <Setter Property="Background" Value="{DynamicResource GantRowBackroundBrush}" />
                <Setter Property="BorderThickness" Value="{DynamicResource LangDict_GanttRowBorderSize}" />
                <Setter Property="BorderBrush" Value="{DynamicResource GantRowBorderBrush}" />
            </Style>
            <Style TargetType="GanttView:SimpleTreeCellContainer">
                <Setter Property="Foreground" Value="{DynamicResource GantFontBrush}" />
                <Setter Property="BorderThickness" Value="{DynamicResource LangDict_GanttRowBorderSize}" />
                <Setter Property="BorderBrush" Value="{DynamicResource GantRowBorderBrush}" />
            </Style>
            <Style TargetType="GanttView:SimpleCellContainer">
                <Setter Property="Foreground" Value="{DynamicResource GantFontBrush}" />
                <Setter Property="BorderThickness" Value="{DynamicResource LangDict_GanttRowBorderSize}" />
                <Setter Property="BorderBrush" Value="{DynamicResource GantRowBorderBrush}" />
            </Style>
        </UserControl.Resources>
        <Grid>
            <Controls:RadGanttView TasksSource="{Binding QueueContext.Items}"
                                   SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                   FirstDayOfWeek="Sunday"
                                   PixelLength="00:00:05"
                                   ShowCurrentHourIndicator="True"                               
                                   HorizontalContentAlignment="Stretch"
                                   VerticalContentAlignment="Stretch"
                                   IsManipulationEnabled="True"
                                   VisibleRange="{Binding Path=VisibleRange, Mode=OneWay}"
                                   InitialExpandBehavior="{StaticResource gntInitialExpandBehavior}"
                                   Background="{StaticResource GantBackgroundBrush}"
                                   x:Name="gntRun">
                <Controls:RadGanttView.Columns>
                    <GanttView:TreeColumnDefinition Header="Name" MemberBinding="{Binding Title}" Width="100" />
                    <GanttView:ColumnDefinition Header="Status" MemberBinding="{Binding RunCode}" Width="50"  />
                    <GanttView:ColumnDefinition Header="Start Time" MemberBinding="{Binding StartTimeString}" Width="100" />
                    <GanttView:ColumnDefinition Header="End Time" MemberBinding="{Binding EndTimeString}" Width="100" />
                    <GanttView:ColumnDefinition Header="Duration" MemberBinding="{Binding Duration}" Width="50" />
                </Controls:RadGanttView.Columns>
     
                <Controls:RadGanttView.TimeRulerLines>
                    <telerik:GroupTickLine>
                        <telerik:TickInterval Interval="OneDay" />
                    </telerik:GroupTickLine>
                    <telerik:MajorTickLine>
                        <telerik:TickInterval Interval="OneHour" />
                    </telerik:MajorTickLine>
                    <telerik:MinorTickLine>
                        <telerik:TickInterval Interval="OneMinute" />
                    </telerik:MinorTickLine>
                </Controls:RadGanttView.TimeRulerLines>
            </Controls:RadGanttView>
        </Grid>

    Please help.

    Regards,
    Yevgeny
  5. Kalin
    Admin
    Kalin avatar
    1209 posts

    Posted 10 Jan 2014 Link to this post

    Hello Yevgeny,

    The desired appearance can be achieved by modifying the Style of the BorderContainers. You will need also set an opacity to 0.5 for example because the containers are overlapping when rendering and that is why you had some borders missing. I have attached a sample project which demonstrates the exact approach.

    Hope this helps.

    Regards,
    Kalin
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  6. Yevgeny
    Yevgeny avatar
    4 posts
    Member since:
    Jun 2010

    Posted 19 Jan 2014 Link to this post

    Hi,

    Thank you for your answer, but unfortunately suggested solution is not applicable for me because I have different GantView background and BorderContainer background, so when Opacity of BorderContainer is set to 50% for example, the BorderContainer Background is changed.

    It looks like a bug, right?
    Can you please suggest some workaround?

    Thenk you,
    Yevgeny
  7. Kalin
    Admin
    Kalin avatar
    1209 posts

    Posted 21 Jan 2014 Link to this post

    Hello Yevgeny,

    I suggested you the approach with the opacity as it was the easiest one to be achieved. The difficulty with the cells styling is caused by way the GanttView gets drawn - firstly the rows are drawn then the columns and this is causing some Backgrounds overlapping between them which hides some of the borders you have set. However in order to achieve the desired you will need to extract the GanttItemsPresenterTemplate and set the Background of the VirtualizedGridPanel named VirtualizedGridPanel. After that you would only need to set the BorderBrushes of the BorderContainer and AlternatingBorderContainer. I have modified and attached the sample project in order to demonstrate the exact approach (note that I have used Implict Styles for styling the control).

    Hope this will work for you.

    Regards,
    Kalin
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  8. Yevgeny
    Yevgeny avatar
    4 posts
    Member since:
    Jun 2010

    Posted 22 Jan 2014 Link to this post

    Hi,

    Thank you for your answer.

    I still have the same problem. I need same background on both sides of the control (Grid and TimeRuler), when BorderContainer background and AlternatingBorderContainer background are set, the problem is back.

    It can be reproducible in your example from the last post:

    <Window.Resources>
            <SolidColorBrush x:Key="GantBackgroundBrush" Color="#7c7c7c"/>
            <SolidColorBrush x:Key="GantGridTitleBackgroundBrush" Color="#C0C0C0"/>
            <SolidColorBrush x:Key="GantSelectedItemBrush" Color="#C0C0C0"/>
            <SolidColorBrush x:Key="GantGridTitleForegroundBrush" Color="#3d3d3d"/>
            <SolidColorBrush x:Key="GantRowBorderBrush" Color="#bbbbbb"/>
            <SolidColorBrush x:Key="GantFontBrush" Color="#6d6c6c"/>
            <SolidColorBrush x:Key="GantRowBackroundBrush" Color="#f4f4f4"/>
     
            <Style TargetType="telerik:ColumnHeaderContainer" BasedOn="{StaticResource ColumnHeaderContainerStyle}">
                <Setter Property="Foreground" Value="{DynamicResource GantGridTitleForegroundBrush}" />
                <Setter Property="Background" Value="{DynamicResource GantGridTitleBackgroundBrush}" />
                <Setter Property="AlternatingBackground" Value="{DynamicResource GantGridTitleBackgroundBrush}" />
            </Style>
     
            <ControlTemplate x:Key="GanttItemsPresenterTemplate" TargetType="telerik:GanttItemsPresenter">
                <telerik:GanttPresenterPanel>
                    <telerik:GanttPresenterPanel.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*" MinWidth="3"/>
                        <ColumnDefinition Width="3*"/>
                        <ColumnDefinition Width="Auto"/>
                    </telerik:GanttPresenterPanel.ColumnDefinitions>
                   
                     
                    <telerik:VirtualizedGridPanel x:Name="FrozenCellsPanel"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Top"
                        Margin="4 -1 0 0"
                        telerik:GanttPresenterPanel.Column="0"
                        telerik:GanttPresenterPanel.Area="Content"/>
     
                    <telerik:TreeRenderingPanel x:Name="ColumnsPanel"
                        Orientation="Horizontal"
                        telerik:GanttPresenterPanel.Column="1"
                        telerik:GanttPresenterPanel.Area="Header"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Stretch"
                        Margin="-1 0 4 0"/>
     
                    <!-- You need to change the background of this panel below-->
                    <telerik:VirtualizedGridPanel x:Name="CellsPanel"
                        telerik:GanttPresenterPanel.Column="1"
                        telerik:GanttPresenterPanel.Area="Content"
                        Margin="-1 -1 4 0"
                        Background="{StaticResource GantRowBackroundBrush}"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        VerticalOffset="{Binding VerticalOffset, ElementName=FrozenCellsPanel, Mode=TwoWay}"
                        HorizontalOffset="{Binding HorizontalOffset, ElementName=ColumnsPanel, Mode=TwoWay}"/>
                 
                    <telerik:TreeRenderingPanel
                        Orientation="Horizontal"
                        x:Name="FrozenColumnsPanel"
                        telerik:GanttPresenterPanel.Column="0"
                        telerik:GanttPresenterPanel.Area="Header"
                        Margin="4 0 0 0"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"/>
                    <ScrollBar
                        telerik:GanttPresenterPanel.Column="1"
                        telerik:GanttPresenterPanel.Area="ScrollBar"
                        Orientation="Horizontal"
                        Minimum="0"
                        Maximum="{Binding ExtentWidth, ElementName=ColumnsPanel}"
                        Value="{Binding HorizontalOffset, ElementName=ColumnsPanel, Mode=TwoWay}"
                        ViewportSize="{Binding ViewportWidth, ElementName=ColumnsPanel}"
                        SmallChange="40"
                        LargeChange="{Binding ViewportWidth, ElementName=ColumnsPanel}"
                        Visibility="{Binding CalculatedHorizontalScrollBarVisibility, ElementName=ColumnsPanel}"/>
                    <telerik:ResizeControl telerik:GanttPresenterPanel.Column="1" telerik:GanttPresenterPanel.Area="Splitter" Style="{StaticResource GanttPresenterSplitterStyle}"/>
                    <telerik:LogicalCanvasPanel x:Name="EventsPanel"
                        telerik:GanttPresenterPanel.Column="2"
                        telerik:GanttPresenterPanel.Area="Content"
                        VerticalOffset="{Binding VerticalOffset, ElementName=CellsPanel, Mode=TwoWay}"
                        Background="Transparent"
                        Margin="0 -1 0 0"
                        VerticalAlignment="Top"
                        HorizontalAlignment="Left"/>
                    <telerik:LogicalCanvasPanel x:Name="TimeRulerPanel"
                        telerik:GanttPresenterPanel.Column="2"
                        telerik:GanttPresenterPanel.Area="Header"
                        VerticalAlignment="Bottom"
                        HorizontalAlignment="Left"
                        Background="Transparent"
                        HorizontalOffset="{Binding HorizontalOffset, ElementName=EventsPanel, Mode=TwoWay}"/>
                    <ScrollBar
                        telerik:GanttPresenterPanel.Column="2"
                        telerik:GanttPresenterPanel.Area="ScrollBar"
                        Orientation="Horizontal"
                        Minimum="0"
                        Maximum="{Binding ExtentWidth, ElementName=EventsPanel}"
                        Value="{Binding HorizontalOffset, ElementName=EventsPanel, Mode=TwoWay}"
                        ViewportSize="{Binding ViewportWidth, ElementName=EventsPanel}"
                        SmallChange="20"
                        LargeChange="{Binding ViewportWidth, ElementName=EventsPanel}"
                        Visibility="{Binding CalculatedHorizontalScrollBarVisibility, ElementName=EventsPanel}"/>
                    <ScrollBar
                        telerik:GanttPresenterPanel.Column="3"
                        telerik:GanttPresenterPanel.Area="Content"
                        Orientation="Vertical"
                        Minimum="0"
                        Maximum="{Binding ExtentHeight, ElementName=CellsPanel}"
                        Value="{Binding VerticalOffset, ElementName=CellsPanel, Mode=TwoWay}"
                        ViewportSize="{Binding ViewportHeight, ElementName=CellsPanel}"
                        Visibility="{Binding CalculatedVerticalScrollBarVisibility, ElementName=CellsPanel}"
                        SmallChange="10"
                        LargeChange="{Binding ViewportHeight, ElementName=CellsPanel}"/>
                </telerik:GanttPresenterPanel>
            </ControlTemplate>
            <Style TargetType="telerik:GanttItemsPresenter" BasedOn="{StaticResource GanttItemsPresenterStyle}">
                <Setter Property="Template" Value="{StaticResource GanttItemsPresenterTemplate}" />
            </Style>
     
     
            <Style TargetType="telerik:BorderContainer" BasedOn="{StaticResource BorderContainerStyle}">
                <Setter Property="BorderBrush" Value="{StaticResource GantRowBorderBrush}"/>
                <Setter Property="Background" Value="{StaticResource GantRowBackroundBrush}"/>
            </Style>
            <Style TargetType="telerik:AlternatingBorderContainer" BasedOn="{StaticResource AlternatingBorderContainerStyle}">
                <Setter Property="Background" Value="{StaticResource GantRowBackroundBrush}" />
                <Setter Property="BorderBrush" Value="{StaticResource GantRowBorderBrush}" />
            </Style>
      
        </Window.Resources>
        <Grid>
            <telerik:RadGanttView x:Name="ganttView" Background="{StaticResource GantBackgroundBrush}">
                <telerik:RadGanttView.Columns>
                    <telerik:TreeColumnDefinition Header="Name 1" />
                    <telerik:TreeColumnDefinition Header="Name 2" />
                    <telerik:TreeColumnDefinition Header="Name 3" />
                    <telerik:TreeColumnDefinition Header="Name 4" />
                    <telerik:TreeColumnDefinition Header="Name 5" />
                </telerik:RadGanttView.Columns>
            </telerik:RadGanttView>
        </Grid>


    Still looks like a bug or I'm missing something... Please advise.

    Regards,
    Yevgeny
  9. Kalin
    Admin
    Kalin avatar
    1209 posts

    Posted 23 Jan 2014 Link to this post

    Hi Yevgeny,

    Yes, setting the Background properties of the BorderContainers and AlternatingBorderContainers causes the overlapping as I mentioned in my previous reply. The Background you need is in the GanttItemsPresenterTemplate again - you set it to set it to the panel named EventsPanel like shown below:

    <telerik:LogicalCanvasPanel x:Name="EventsPanel"
                        telerik:GanttPresenterPanel.Column="2"
                        telerik:GanttPresenterPanel.Area="Content"
                        VerticalOffset="{Binding VerticalOffset, ElementName=CellsPanel, Mode=TwoWay}"
                        Background="{StaticResource GantRowBackroundBrush}"
                        Margin="0 -1 0 0"
                        VerticalAlignment="Top"
                        HorizontalAlignment="Left"/>

    This will change the Background of the TimeRuller without affecting the cell.

    Hope this helps. If you have any other questions let us know.

    Regards,
    Kalin
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
Back to Top
UI for WPF is Visual Studio 2017 Ready