Forums Ultimate UI for WPF
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Shahin Rawther
295
Change background of tab group pane tab header
posted

My requirement is to change the back ground color of the following.

1.Background on which the top menus Home/Modules is displayed
2.Background of the tab header of tab group pane on the tab group (Alerts, Control Panel, Market Access and Utilization Panel in the attached image)
3.Background of the individual tab header on the panes within a tab group,(Single limits, Aggregate limits etc in the attached image)

I am attaching an image that shows what i am trying to achieve.

I managed to achieve #3, change the background of the individual tabs on the panes namely, Single limits, aggregate limits etc. How can i change the background of # 1 and # 2. 

I can get the individual tab headers (Single limits, Aggregate limits) to show in Yellow Green color by adding the following style in my resource dictionary and importing it to the resource dictionary as shown below.

<Style TargetType="{x:Type igDock:PaneTabItem}">
    <Setter Property="Background" Value="YellowGreen"/>
    <Style.Triggers>
      <DataTrigger Binding="{Binding Path=Pane.Tag, RelativeSource={RelativeSource Self}}" Value="IsBCPActive">
        <Setter Property="Background" Value="Red" />
      </DataTrigger>
    </Style.Triggers>
  </Style>
<igDock:ContentPane.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary
          Source="pack://application:,,,/GLM.Infrastructure.View;component/Themes/XamDataGrid.xaml" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </igDock:ContentPane.Resources>

My entire xaml for the Tabgroup Control Panel tab group pane is pasted below

<igDock:ContentPane
  x:Class="MorganStanley.IED.GLM.Infrastructure.ControlPanel.Views.ContainerView"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:igDock="http://infragistics.com/DockManager"
  xmlns:regions="clr-namespace:Microsoft.Practices.Composite.Presentation.Regions;assembly=Microsoft.Practices.Composite.Presentation"
  xmlns:this="clr-namespace:MorganStanley.IED.GLM.Infrastructure.ControlPanel;assembly="
  xmlns:Integration="clr-namespace:MorganStanley.IED.GLM.Infrastructure.View.Integration;assembly=GLM.Infrastructure.View"
  Integration:TabGroupPaneBehaviour.OrderIndex="2"
  Header="Control Panel"
  TabHeader="Control Panel"
  AllowClose="False"
  Effect="{x:Null}"
  BitmapEffect="{x:Null}"
  Name="ControlPanelContainerPane">
  <igDock:ContentPane.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary
          Source="pack://application:,,,/GLM.Infrastructure.View;component/Themes/XamDataGrid.xaml" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </igDock:ContentPane.Resources>
  <igDock:XamDockManager>
    <igDock:DocumentContentHost>
      <igDock:SplitPane
        SplitterOrientation="Vertical">
        <igDock:TabGroupPane
          Name="ControlPanelTabPane"
          regions:RegionManager.RegionName="{x:Static this:RegionNames.ControlPanelRegion}"/>
      </igDock:SplitPane>
    </igDock:DocumentContentHost>

  </igDock:XamDockManager>

</igDock:ContentPane>

For changing the background of the ribboin I tried the solution described in the post http://ko.infragistics.com/community/forums/p/57092/401817.aspx to change the background of the ribbon, but it didnt work.

My xaml for  the ribbon is pasted below.

 

<igRibbon:XamRibbonWindow
  x:Class="MorganStanley.IED.GLM.Shell"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:igRibbon="http://infragistics.com/Ribbon"
  xmlns:igDock="http://infragistics.com/DockManager"
  xmlns:regions="clr-namespace:Microsoft.Practices.Composite.Presentation.Regions;assembly=Microsoft.Practices.Composite.Presentation"
  xmlns:infra="clr-namespace:MorganStanley.IED.GLM.Infrastructure;assembly=GLM.Infrastructure"
  xmlns:infraModules="clr-namespace:MorganStanley.IED.GLM.Infrastructure.Modules;assembly=GLM.Infrastructure"
  xmlns:persistence="http://schemas.morganstanley.com/msdotnet/cafgui/toolkit/xaml/persistency"
  persistence:WindowPersistence.PersistenceConfiguration="{Binding Source={StaticResource ApplicationPersistence}, Path=PersistenceConfiguration}"
  persistence:LogicalTreePersistence.Infrastructure="{StaticResource LogicalTreePersistenceInfrastructure}"
  persistence:WindowPersistence.IsMainWindow="false"
  Title="Global Limits Manager"
  Height="786"
  Width="1024"
  AllowsTransparency="False"
  SnapsToDevicePixels="True"
  Icon="pack://application:,,,/GLM.Infrastructure.View;component/Images/Logo.png"
  Loaded="ShellLoaded"
  WindowState="Minimized"
  Closed="ShellClosed"
  KeyboardNavigation.TabNavigation="Cycle">

  <igRibbon:XamRibbonWindow.Resources>

    <DataTemplate
      DataType="{x:Type infraModules:RuntimeDetails}">
      <Grid
        Margin="7,3">
        <Grid.ColumnDefinitions>
          <ColumnDefinition />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <StackPanel
          Grid.Column="0"
          Orientation="Horizontal">
          <TextBlock>User: </TextBlock>
          <TextBlock
            Margin="5,0,0,0"
            Text="{Binding Runtime.UserInfo.Username}" />
        </StackPanel>
        <StackPanel
          Grid.Column="1"
          Orientation="Horizontal"
          Margin="15,0,0,0">
          <TextBlock>Profile: </TextBlock>
          <TextBlock
            Margin="5,0,0,0"
            Text="{Binding Profile.Name}" />
        </StackPanel>
      </Grid>
    </DataTemplate>

  </igRibbon:XamRibbonWindow.Resources>

  <igRibbon:RibbonWindowContentHost>
    <igRibbon:RibbonWindowContentHost.Ribbon>
      <igRibbon:XamRibbon
        Name="_ribbon"
        VerticalAlignment="Top"
        Theme="Office2k7Black"
       
        IsMinimized="True">
        <igRibbon:XamRibbon.ApplicationMenu>
          <igRibbon:ApplicationMenu
            Image="pack://application:,,,/GLM.Infrastructure.View;component/Images/LogoRibbon.png"
            regions:RegionManager.RegionName="ConcordApplication.FileCommandBar">
            <igRibbon:ApplicationMenu.Items>
              <igRibbon:MenuTool
                x:Name="StartMinimizedMenu"
                Caption="Startup Size"
                ButtonType="DropDown"
                LargeImage="pack://application:,,,/GLM.Infrastructure.View;component/Images/win.png">
                <igRibbon:LabelTool Caption="Set the initial startup size of GLM"/>
                <igRibbon:RadioButtonTool
                  x:Name="StartNormalMenuTool"
                  Caption="Normal"
                  Click="StartNormalClicked"
                  LargeImage="pack://application:,,,/GLM.Infrastructure.View;component/Images/winUp.png"
                  igRibbon:MenuToolBase.MenuItemDescription="Start GLM with main window visible"/>
                <igRibbon:RadioButtonTool
                  x:Name="StartMinimizedMenuTool"
                  Caption="Minimized"
                  Click="StartMinimizedClicked"
                  LargeImage="pack://application:,,,/GLM.Infrastructure.View;component/Images/winDown.png"
                  igRibbon:MenuToolBase.MenuItemDescription="Start GLM minimized to tray area"/>
              </igRibbon:MenuTool>
              <igRibbon:MenuTool
                x:Name="AlertSoundMenu"
                Caption="Alert Sound"
                ButtonType="DropDown"
                LargeImage="pack://application:,,,/GLM.Infrastructure.View;component/Images/AlertSound.png">
                <igRibbon:LabelTool Caption="Whether sound is play when alerts come in"/>
                <igRibbon:RadioButtonTool
                  x:Name="PlayAlertSoundMenuTool"
                  Caption="Play alert sound"
                  Click="PlayAlertSoundMenuClicked"
                  LargeImage="pack://application:,,,/GLM.Infrastructure.View;component/Images/PlayAlertSound.png"
                  igRibbon:MenuToolBase.MenuItemDescription="Play alert sound when alerts are received."/>
                <igRibbon:RadioButtonTool
                  x:Name="NoAlertSoundMenuTool"
                  Caption="Mute sound"
                  Click="NoAlertSoundClicked"
                  LargeImage="pack://application:,,,/GLM.Infrastructure.View;component/Images/NoAlertSound.png"
                  igRibbon:MenuToolBase.MenuItemDescription="No sound is played when alerts are received."/>
              </igRibbon:MenuTool>
              <igRibbon:MenuTool
                x:Name="AlertLocationMenu"
                Caption="Alert Location"
                ButtonType="DropDown"
                LargeImage="pack://application:,,,/GLM.Infrastructure.View;component/Images/AlertLocation.png">
                <igRibbon:LabelTool Caption="Where the alert popup is displayed"/>
                <igRibbon:RadioButtonTool
                  x:Name="DefaultAlertLocationMenuTool"
                  Caption="Bottom right"
                  Click="DefaultAlertLocationMenuClicked"
                  LargeImage="pack://application:,,,/GLM.Infrastructure.View;component/Images/DefaultAlertLocation.png"
                  igRibbon:MenuToolBase.MenuItemDescription="Display alert popup at bottom right of the screen."/>
                <igRibbon:RadioButtonTool
                  x:Name="CentreAlertLocationMenuTool"
                  Caption="Centre of screen"
                  Click="CentreAlertLocationMenuClicked"
                  LargeImage="pack://application:,,,/GLM.Infrastructure.View;component/Images/CentreAlertLocation.png"
                  igRibbon:MenuToolBase.MenuItemDescription="Display alert popup at centre of the screen."/>
              </igRibbon:MenuTool>
              <igRibbon:SeparatorTool/>
              <igRibbon:ButtonTool
                Caption="Settings"
                LargeImage="pack://application:,,,/GLM.Infrastructure.View;component/Images/Options.png"
                Click="ConfigSettings_Click"/>
              <igRibbon:ButtonTool
                Caption="About"
                LargeImage="pack://application:,,,/GLM.Infrastructure.View;component/Images/info.png"
                Click="About_Click"/>
            </igRibbon:ApplicationMenu.Items>
            <igRibbon:ApplicationMenu.FooterToolbar>
              <igRibbon:ApplicationMenuFooterToolbar>
              <igRibbon:ButtonTool
                SmallImage="pack://application:,,,/GLM.Infrastructure.View;component/Images/close.png"
                Caption="_Exit"
                Click="Exit_Click" />
              </igRibbon:ApplicationMenuFooterToolbar>
            </igRibbon:ApplicationMenu.FooterToolbar>
          </igRibbon:ApplicationMenu>
        </igRibbon:XamRibbon.ApplicationMenu>
        <igRibbon:XamRibbon.QuickAccessToolbar>
          <igRibbon:QuickAccessToolbar
            x:Name="QuickAccessToolbar"
            Visibility="Collapsed">
          </igRibbon:QuickAccessToolbar>
        </igRibbon:XamRibbon.QuickAccessToolbar>
        <igRibbon:RibbonTabItem
          Header="Home"
          regions:RegionManager.RegionName="{x:Static infra:RegionNames.LegacyToolbarRegion}">
        </igRibbon:RibbonTabItem>
        <igRibbon:RibbonTabItem
          Header="Modules"
          regions:RegionManager.RegionName="{x:Static infra:RegionNames.ModulesRegion}">
        </igRibbon:RibbonTabItem>
      </igRibbon:XamRibbon>
    </igRibbon:RibbonWindowContentHost.Ribbon>

    <DockPanel>
      <igDock:XamDockManager
        Name="infragisticsDockArea"
        Theme="Office2k7Black">
        <igDock:DocumentContentHost
          Name="MainHost">
          <igDock:SplitPane
            Name="HostSplitPane">
            <igDock:TabGroupPane
              Name="HostTabGroupPane"
              regions:RegionManager.RegionName="{x:Static infra:RegionNames.WorkspaceRegion}" />
          </igDock:SplitPane>
        </igDock:DocumentContentHost>
      </igDock:XamDockManager>     
      <DockPanel.LayoutTransform>
        <ScaleTransform
          CenterX="0"
          CenterY="0"
          ScaleX="{Binding ElementName=_zoom, Path=Value}"
          ScaleY="{Binding ElementName=_zoom, Path=Value}" />
      </DockPanel.LayoutTransform>
    </DockPanel>

    <igRibbon:RibbonWindowContentHost.StatusBar>
      <StatusBar
        BorderThickness="0">
        <StatusBarItem
          DockPanel.Dock="Right"
          Padding="5,0,10,0"
          Background="Transparent">
          <StackPanel
            Orientation="Horizontal"
            VerticalAlignment="Top">
            <Slider
              x:Name="_zoom"
              Width="120"
              Minimum=".5"
              Maximum="2"
              Value="1"
              IsSnapToTickEnabled="True"
              TickFrequency="0.01"
              VerticalAlignment="Center"
              ToolTip="Slide the bar to increase or decrease the overall size of the visuals.">
            </Slider>
            <TextBlock
              Margin="5,0,0,0"
              Width="28"
              ToolTip="Percentage of actual visual size. 100% being the default size."
              VerticalAlignment="Center"
              TextAlignment="Right"
              Text="{Binding ElementName=_zoom, Path=Value, StringFormat={}{0:0%}}" />
          </StackPanel>
        </StatusBarItem>

        <StatusBarItem
          DockPanel.Dock="Right">
          <ItemsControl
            Grid.Column="0"
            HorizontalContentAlignment="Right"
            VerticalAlignment="Center"
            regions:RegionManager.RegionName="{x:Static infra:RegionNames.RuntimeDetailsStatusBarRegion}">
            <ItemsControl.ItemsPanel>
              <ItemsPanelTemplate>
                <StackPanel
                  Orientation="Horizontal" />
              </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
          </ItemsControl>
        </StatusBarItem>

        <StatusBarItem>
          <ItemsControl
            Grid.Column="0"
            HorizontalContentAlignment="Left"
            regions:RegionManager.RegionName="{x:Static infra:RegionNames.StatusStatusBarRegion}">
            <ItemsControl.ItemsPanel>
              <ItemsPanelTemplate>
                <StackPanel
                  Orientation="Horizontal" />
              </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
          </ItemsControl>
        </StatusBarItem>
      </StatusBar>
    </igRibbon:RibbonWindowContentHost.StatusBar>

  </igRibbon:RibbonWindowContentHost>
</igRibbon:XamRibbonWindow>

 

It will be nice if you could advice what property is best suited to base the trigger to change the tab header background. I would want to change the background color based on an even in my app and then possibly changing the value of the tag property of the Content pane and ribbon. It will be nice not  to use view model to set the property and then use binding, since that means i need a view model for each of the views (there are many panes whose background has to be changed based on this single event) that define the tab group pane and then set a property on the view model which is bound to the view. Ideal solution will be we use some property in the Content pane/Pane Tab item and then use the style to use that property as the trigger so the style can be defined in one place and will work based on the value of this property.

Any help is greatly appreciated

Thanks

Shahin

  • 22015
    posted

    Hello Shahin,

     I have been looking into your issue. For you xamRibbon requirement - since you are setting the Theme property for the ribbon, if you want to use a ResourceWasher in your application, you should place it as a resource for the XamRibbon as follows:

    <igRibbon:XamRibbon.Resources>

                        <ResourceDictionary>

                            <ResourceDictionary.MergedDictionaries>

                                <igThemes:RibbonOffice2k7Black />

    <igThemes:ResourceWasher AutoWash="True" WashColor="#FF3399CC" WashMode="HueSaturationReplacement">

                                    <igThemes:ResourceWasher.SourceDictionary>

                                        <igThemes:RibbonOffice2k7BlackBrushes />

                                    </igThemes:ResourceWasher.SourceDictionary>

                                </igThemes:ResourceWasher>

                            </ResourceDictionary.MergedDictionaries>

                        </ResourceDictionary>

                    </igRibbon:XamRibbon.Resources>

     In order to change the background color, where the top menus (Home/Modules) as you can use the style for the Ribbons XamTabControl, used in the Office2k7Black theme and there to change the background, based on the trigger you want (since you have not mentioned on what condition the event would fire).

     For your second requirement, setting the background for the first line of tabs you can use the same style you have used for the third requirement. You have to set the style as a resource of the xamDockManager. This way the style  would apply to all of the PaneTabItems in the xamDockManager.

     In future please post the different question about the different controls in the forums for exact control, in order other community members to benefit from this threads.

     Please do not hesitate to let me know if you have any further questions on this matter.