Как отобразить изображение или логотип в элементе управления лентой wpf
Как лучше всего отображать изображение или логотип в основном на правой стороне элемента управления лентой?
Честно говоря, я никогда не использовал этот элемент управления, но если он работает так же, как и любой другой элемент управления WPF, вы можете добавить в него любой другой элемент управления, используя свойство Content. Это означает, что вы можете добавлять панели, кнопки, изображения и т. д...
Например, элемент управления Button имеет свойство Content. В основном вы просто помещаете туда текст, но вы можете назначить там совершенно новый элемент управления, например listbox, radiobutton, textbox ... (Вероятно, не полезно, но вы понимаете суть ;-)).
Есть образцы в google.
надеюсь, это поможет.
Предполагая, что вы хотите, чтобы изображение появлялось в правой части каждой вкладки, вам нужно изменить шаблон для RibbonTab (если вы хотите, чтобы оно было только на одной конкретной вкладке, вы должны поместить его только на эту вкладку, дав стилю имя и привязав вкладку к этому стилю). В стиле, который я собрал здесь, ищите линию
:<Image HorizontalAlignment="Right" Height="32" Source="Images/LargeIcon.png" Stretch="Fill" VerticalAlignment="Center" Width="32" Margin="0,0,10,0" Opacity="0.43"/>и замените его образами, которые вам нужны.
<ribbon:RibbonWindow.Resources>
<Style TargetType="{x:Type ribbon:RibbonTab}">
<Setter Property="KeyTipService.IsKeyTipScope" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ribbon:RibbonTab}">
<Grid x:Name="MainGrid" ClipToBounds="True">
<Grid.Visibility>
<TemplateBinding Property="IsSelected">
<TemplateBinding.Converter>
<BooleanToVisibilityConverter/>
</TemplateBinding.Converter>
</TemplateBinding>
</Grid.Visibility>
<Line x:Name="OuterLeftLine" Stroke="{Binding ContextualTabGroup.Background, RelativeSource={RelativeSource TemplatedParent}}" StrokeThickness="2" X1="0" X2="{Binding TabHeaderLeft, RelativeSource={RelativeSource TemplatedParent}}" Y1="0" Y2="0"/>
<Line x:Name="OuterRightLine" Stroke="{Binding ContextualTabGroup.Background, RelativeSource={RelativeSource TemplatedParent}}" StrokeThickness="2" X1="{Binding TabHeaderRight, RelativeSource={RelativeSource TemplatedParent}}" X2="{Binding ActualWidth, RelativeSource={RelativeSource TemplatedParent}}" Y1="0" Y2="0"/>
<ScrollViewer x:Name="ScrollViewer">
<ScrollViewer.Style>
<Style TargetType="{x:Type ScrollViewer}">
<Setter Property="Focusable" Value="False"/>
<Setter Property="VerticalScrollBarVisibility" Value="Disabled"/>
<Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="CanContentScroll" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid x:Name="Grid" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" Grid.ColumnSpan="3" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>
<RepeatButton Grid.Column="0" CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Command="ScrollBar.LineLeftCommand" Focusable="False" HorizontalContentAlignment="Left">
<RepeatButton.Style>
<Style TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Width" Value="14"/>
<Setter Property="Background" Value="{Binding (ribbon:RibbonControlService.Ribbon).Background, RelativeSource={RelativeSource Self}}"/>
<Setter Property="BorderBrush" Value="{Binding (ribbon:RibbonControlService.Ribbon).BorderBrush, RelativeSource={RelativeSource Self}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}" CornerRadius="3,0,0,3">
<Border x:Name="InnerBorder" Background="#80FFFFFF" CornerRadius="3,0,0,3">
<Path x:Name="GlyphPath" Data="M4,0L0,3.5 4,7" Fill="Gray" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="HorizontalContentAlignment" Value="Right">
<Setter Property="Data" TargetName="GlyphPath" Value="M0,0L4,3.5 0,7"/>
<Setter Property="CornerRadius" TargetName="OuterBorder" Value="0,3,3,0"/>
<Setter Property="CornerRadius" TargetName="InnerBorder" Value="0,3,3,0"/>
</Trigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding HighContrast}" Value="False"/>
<Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="Background" TargetName="InnerBorder" Value="{Binding (ribbon:RibbonControlService.Ribbon).MouseOverBackground, RelativeSource={RelativeSource Self}}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding HighContrast}" Value="False"/>
<Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Self}}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="Background" TargetName="InnerBorder" Value="{Binding (ribbon:RibbonControlService.Ribbon).PressedBackground, RelativeSource={RelativeSource Self}}"/>
</MultiDataTrigger>
<DataTrigger Binding="{Binding HighContrast}" Value="True">
<Setter Property="CornerRadius" TargetName="OuterBorder" Value="0"/>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
<Setter Property="Background" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="CornerRadius" TargetName="InnerBorder" Value="0"/>
<Setter Property="Background" TargetName="InnerBorder" Value="Transparent"/>
<Setter Property="Fill" TargetName="GlyphPath" Value="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}"/>
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding HighContrast}" Value="True"/>
<Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="Background" TargetName="InnerBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding HighContrast}" Value="True"/>
<Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Self}}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
</MultiDataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</RepeatButton.Style>
Это старый вопрос, но я хочу поделиться также своим решением на случай, если другие все еще ищут альтернативное решение без необходимости какого-либо xaml.
Он наследует RibbonTab и позволяет установить изображение/логотип компании в правой части вкладки. Кроме того он проверяет изменения размера если изображение может быть показано без перекрытие ребристых групп.
Imports System.Reflection
Public Class ExRibbonTab
Inherits Ribbon.RibbonTab
Public Shared ReadOnly ImageSourceProperty As DependencyProperty = DependencyProperty.Register("ImageSource", GetType(ImageSource), GetType(ExRibbonTab))
Public Shared ReadOnly ImageHorizontalMarginProperty As DependencyProperty = DependencyProperty.Register("ImageHorizontalMargin", GetType(Double), GetType(ExRibbonTab))
''' <summary>Gets or sets the image used on right side of this RibbonTab (i.e. Company logo).</summary>
Property ImageSource As ImageSource = Nothing
''' <summary>Gets or sets the image horizontal margin (=left and right space; default=20).</summary>
Property ImageHorizontalMargin As Double = 20
Private mImage As Image
Private mScrollGrid As Grid
Dim dpiXProperty = GetType(SystemParameters).GetProperty("DpiX", BindingFlags.NonPublic Or BindingFlags.[Static])
Dim dpiYProperty = GetType(SystemParameters).GetProperty("Dpi", BindingFlags.NonPublic Or BindingFlags.[Static])
Private dpiX As Integer = CInt(dpiXProperty.GetValue(Nothing, Nothing))
Private dpiY As Integer = CInt(dpiYProperty.GetValue(Nothing, Nothing))
Protected Overrides Sub OnInitialized(e As EventArgs)
MyBase.OnInitialized(e)
_setImage()
End Sub
Private Sub _setImage()
' Search for ScrollViewer in case ImageSource is set
Me.Dispatcher.BeginInvoke(Sub()
Dim scroll As ScrollViewer = Me.Template.FindName("ScrollViewer", Me)
If scroll Is Nothing OrElse ImageSource Is Nothing Then Return
mScrollGrid = scroll.Content
AddHandler mScrollGrid.SizeChanged, AddressOf _sizeChanged
' Create new BitmapImage from ImageSource
Dim bmp As BitmapImage = ImageSource
mImage = New Image
With mImage
.Margin = New Thickness(ImageHorizontalMargin / 2, 0, ImageHorizontalMargin / 2, 0)
.HorizontalAlignment = HorizontalAlignment.Right
.VerticalAlignment = VerticalAlignment.Center
.Width = bmp.DecodePixelHeight / dpiY * 96
.Height = bmp.DecodePixelWidth / dpiX * 96
.Source = bmp
End With
' Insert image into grid before ItemsPresenter
mScrollGrid.Children.Insert(1, mImage)
_showImage(Nothing, mScrollGrid.ActualWidth)
If Me.Items.Count > 0 Then
' Add handler to last RibbonGroup to track size changes
AddHandler CType(Me.Items(Me.Items.Count - 1), Ribbon.RibbonGroup).SizeChanged, AddressOf _sizeChanged
End If
End Sub)
End Sub
Private Sub _showImage(sender As Object, newWidth As Double)
If newWidth = 0 Then Return ' Return if there is no width
' Check if this tab is also the selected tab otherwise return
If mScrollGrid.Children.Count < 2 OrElse Not Me.Ribbon.SelectedValue Is Me Then Return
Dim x As Double = mScrollGrid.Children(2).DesiredSize.Width ' use width from itemspresenter
' Check if image fits in available tab width
If newWidth > x + mImage.Width + ImageHorizontalMargin + 5 Then
mImage.Visibility = Visibility.Visible
Else
mImage.Visibility = Visibility.Hidden
End If
End Sub
Private Sub _sizeChanged(sender As Object, e As SizeChangedEventArgs)
' Ensure image visibility depending on ribbon size
Me.Dispatcher.BeginInvoke(Sub()
If TypeOf sender Is Ribbon.RibbonGroup Then
_showImage(sender, CType(sender.Parent, Ribbon.RibbonTab).ActualWidth)
Else
If Not e.NewSize.Width = e.PreviousSize.Width Then _showImage(sender, e.NewSize.Width)
End If
End Sub)
End Sub
End Class
Это может быть лучше видно, если вы разместите его (с полной информацией) в качестве подсказки.