Hi,
I am developing an application using silverlight and infragistics controls.
I have an outlookbar attached in my application and I have used styles to customise the hyperlink on it.
My requirements are:
1) The color of the link should be changed when it is in focus, that is, it is being navigated and the color should persist till the user is on that particular page.
2)Once the user has navigated out of that link it should regain its initial state.
Please help
Hi Stefan,
Thank you for your help. I will get back when I will need that thing.
Hello,
I have been looking into the code, but since I cannot be completely sure how your data is organized, I am not able to conclude what can casue your issue, so could you please send an isolated sample project, where this is reproduced, so I can investigate it further for you.
Looking forward for your reply.
Thank you for your reply. I could not work this out so I am posting my piece of xamOutLookBar here.
<
ig:XamOutlookBar x:Name="XamOutlookBar" HorizontalAlignment="Left" Grid.RowSpan="2" Background="{StaticResource MainPageHeaderBGBrush
}">
<ig:XamOutlookBar.StringSettings
>
<ig:StringSettings NavigationPaneMinimizedText
="View Content" />
</ig:XamOutlookBar.StringSettings
<ig:OutlookBarGroup Header="Dashboard" IsSelected
="True" >
<StackPanel
<HyperlinkButton x:Name="hylink" Content="Back Office IT" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri
="/DashBoardBOIT" />
<HyperlinkButton Content="Sub Divisions" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri
="/DashBoardSubDivision"/>
</StackPanel
</ig:OutlookBarGroup
<ig:OutlookBarGroup Header="Operational" auth:AuthorizationService.RequiresRole="Operational_View" auth:AuthorizationService.TargetProperties="Visibility" LayoutUpdated
="OutlookBarGroup_LayoutUpdated">
<StackPanel ScrollViewer.HorizontalScrollBarVisibility
="Auto">
<HyperlinkButton Content="SoW, PO and Roles" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri="/SOWView" ToolTipService.ToolTip
="Add, modify SoW, PO and Roles"/>
<HyperlinkButton Content="Onboarding (M C)" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri="/Outsourced ResourcesView2" ToolTipService.ToolTip
="Onboard/offboard Managed Capacity SoW Resource"/>
<HyperlinkButton Content="Onboarding (M S)" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri="/FixedResourceOnBoardingView" ToolTipService.ToolTip
="Onboard/offboard Managed Service SoW Resource"/>
<HyperlinkButton Content="Onboarding (Contractor)" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri="/ContractorOrEmployeeOnBoardingView" ToolTipService.ToolTip
="Onboard/offboard Contractor"/>
<HyperlinkButton Content="MPPs" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri
="/MPPView"/>
<ig:OutlookBarGroup Header="Reports" auth:AuthorizationService.RequiresRole="Reports_View" auth:AuthorizationService.TargetProperties
="Visibility">
<HyperlinkButton Content="Financial Pivot" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri
="/SoWPOPivotView"/>
<HyperlinkButton Content="Headcount Pivot" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri
="/ResourceHeadCountPivotView"/>
<HyperlinkButton Content="Headcount by Sub-Division" Style="{StaticResource NavigationHyperlinkStyle}"
NavigateUri
="/SubDivisionProductLineReportView"/>
<HyperlinkButton Content="Headcount by Project" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri
="/ProjectReportView"/>
<HyperlinkButton Content="Headcount by Domain" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri
="/DomainAndSubDomainReportView"/>
<!--<HyperlinkButton Content="SoW and PO" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri="/SoWAndPOView"/>-->
<!--<HyperlinkButton Content="Outsourced Resources" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri="/OutsourcedResourcesView"/>-->
<ig:OutlookBarGroup Header="Masters" auth:AuthorizationService.RequiresRole="Masters_View" auth:AuthorizationService.TargetProperties
="Visibility" >
<HyperlinkButton Content="Vendors" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri
="/VendorView"/>
<HyperlinkButton Content="Projects" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri
="/ProjectsView"/>
<HyperlinkButton Content="Domains" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri
="/DomainsView"/>
<HyperlinkButton Content="Subdomains" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri
="/SubDomainsView"/>
<HyperlinkButton Content="Currencies" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri
="/Currency"/>
<HyperlinkButton Content="Grades" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri
="/GradesView"/>
<HyperlinkButton Content="MSA Dates" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri
="/MSADatesView"/>
<HyperlinkButton Content="Locations" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri
="/Location"/>
<HyperlinkButton Content="Subdivisions" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri
="/SubDivisionView"/>
<HyperlinkButton Content="Product Lines" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri
="/ProductLineView"/>
<HyperlinkButton Content="Teams" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri
="/TeamView"/>
<HyperlinkButton Content="Rate Cards" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri
="/RateCardView" />
<ig:OutlookBarGroup Header="Administration" auth:AuthorizationService.RequiresRole="Admin_Role" auth:AuthorizationService.TargetProperties
<HyperlinkButton Content="User Management" Style="{StaticResource NavigationHyperlinkStyle}" NavigateUri
="/UserManagementView"/>
</ig:XamOutlookBar
In this my hyper link buttons use style NavigationHyperlinkStyle:
<Style TargetType="HyperlinkButton" x:Key
="NavigationHyperlinkStyle">
<Setter Property="Width" Value
="180"/>
<Setter Property="FontSize" Value
="12"/>
<Setter Property="Padding" Value
="5,0,2,0"/>
<Setter Property="Cursor" Value
="Hand"/>
<Setter Property="Background" Value
="Transparent" />
<Setter Property="Height" Value
="24"/>
<Setter Property="HorizontalAlignment" Value
="Center"/>
<Setter Property="VerticalAlignment" Value
<Setter Property="Foreground" Value
="White"/>
<Setter Property="HorizontalContentAlignment" Value
="Left"/>
<Setter Property="VerticalContentAlignment" Value
<Setter Property
="Template">
<Setter.Value
<ControlTemplate TargetType
="HyperlinkButton">
<Grid x:Name="ButtonGrid" Cursor="{TemplateBinding Cursor}" Background="{TemplateBinding Background
<VisualStateManager.VisualStateGroups
<VisualStateGroup x:Name
="CommonStates">
<VisualState x:Name
="Normal"/>
="MouseOver"/>
="Pressed"/>
="Disabled">
<Storyboard
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="Visibility" Duration
="0">
<DiscreteObjectKeyFrame KeyTime
<DiscreteObjectKeyFrame.Value
<Visibility>Visible</Visibility
</DiscreteObjectKeyFrame.Value
</DiscreteObjectKeyFrame
</ObjectAnimationUsingKeyFrames
</Storyboard
</VisualState
</VisualStateGroup
="FocusStates">
="Focused">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty
="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value
="0.35"/>
</DoubleAnimationUsingKeyFrames
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty
="(Rectangle.RadiusX)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value
="1"/>
="(Rectangle.RadiusY)">
="Unfocused"/>
</VisualStateManager.VisualStateGroups
<Rectangle x:Name="FocusVisualElement" Margin="-1" RadiusX="1" RadiusY
="1">
<Rectangle.Fill
<LinearGradientBrush EndPoint="0,0" StartPoint
="0,1">
<GradientStop Color="#FF498BC4" Offset
<GradientStop Color="#FF144269" Offset
="0"/>
</LinearGradientBrush
</Rectangle.Fill
</Rectangle
<Border x:Name="ActiveBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity
<Border x:Name="ContentBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" Opacity
<ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Opacity
</ContentPresenter
</Border
<!-- <Border x:Name="InteractiveBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" Background="{StaticResource HoverHyperLinkBackgroundColorBrush}" BorderThickness="1,1,1,1" Opacity="0" BorderBrush="{StaticResource HoverHyperLinkBackgroundColorBrush}" CornerRadius="1,1,1,1"/>
<Border x:Name="InteractiveElementBorder" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed">
<TextBlock x:Name="InteractiveElement" Foreground="{StaticResource HoverHyperlinkForegroundColorBrush}" FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Text="{TemplateBinding Content}"/>
</Border>-->
<TextBlock x:Name="DisabledOverlay" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Text="{TemplateBinding Content}" Foreground="#FFAAAAAA" Visibility
="Collapsed"/>
</Grid
</ControlTemplate
</Setter.Value
</Setter
</Style
I want that when I click on my hyperlink buttons they should change color to some different color, the button should remain in that state as long as it is active.
once I navigate away from that particular page the button should acquire its initial colo.
Hello Ritika,
I am just checking if you got this worked out or you still require any assistance or clarification on the matter.
Thank you for your post. I have been looking into it, but it seems like that I am missing something in your scenario. I am not completely sure what is your issue with the XamOutlookBar and how you created your navigation logic, so could you please send an isolated sample project, where the issue is reproduced, so I can investigate it further for you.