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
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.
Thanks, Your solution worked just fine
I am glad I was able to help. Please do not hesitate to contact us if you have any further questions.