How do I remove the Mouse Over Effect on WPF Ribbon Group? - wpf

I'm working on this Ribbon Control in WPF: System.Windows.Controls.Ribbon.Ribbon
I've made the background orange and I've changed the style slightly. It looks like this:
When I move the cursor over a group it looks like this:
I want to remove the white mouse over / hover effect, but I don't know which Style or Template I should look at. I've tried all these:
Ribbon
RibbonTab
RibbonTabHeader
RibbonButton
RibbonGroup
Is it possible? How do I do it?

So it is inside the style of the RibbonGroup:
<!--Ribbon Group - Style-->
<Style TargetType="RibbonGroup">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="ribbonGroupControlTemplate" TargetType="RibbonGroup" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Border Background="{TemplateBinding Panel.Background}" Name="GroupBorder" Margin="1,2,0,0">
<Grid Name="MainGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="16" />
</Grid.RowDefinitions>
<Border BorderThickness="1,1,1,1" CornerRadius="2,2,2,2" BorderBrush="{TemplateBinding RibbonControlService.MouseOverBorderBrush}" Background="{TemplateBinding RibbonControlService.MouseOverBackground}" Name="PART_HotBackground" Opacity="0" SnapsToDevicePixels="True" Grid.RowSpan="3" />
<Border Background="{TemplateBinding Border.BorderBrush}" Name="SeparatorBorder" Width="1" Height="75" VerticalAlignment="Center" SnapsToDevicePixels="True" Grid.Column="1" Grid.RowSpan="3" />
<Border Padding="3,0,3,0" Margin="2,1,2,0">
<Grid>
<ItemsPresenter Name="ItemsPresenter" />
<ContentControl Name="PART_TemplateContentControl" Visibility="Collapsed" Focusable="False" />
</Grid>
...
The culprit is this Border:
<Border BorderThickness="1,1,1,1" CornerRadius="2,2,2,2" BorderBrush="{TemplateBinding RibbonControlService.MouseOverBorderBrush}" Background="{TemplateBinding RibbonControlService.MouseOverBackground}" Name="PART_HotBackground" Opacity="0" SnapsToDevicePixels="True" Grid.RowSpan="3" />
When I comment out or remove that border and the triggers that go with it; it solves my problem.

Related

XAML: How to bind TabControl nested element to Attached Property of TabItem

I have been searching for a "pure" XAML solution for this problem but just cannot find it.
My goal would be to only create an Attached Property in code behind but the rest should be XAML only without creating a Custom Control or User Control. But I'm not sure whether this is possible at all and if, how to make the connection between a nested element inside the TabControl template and an Attached Property set in a TabItem
I'd have a boilerplate Attached Property of string with [AttachedPropertyBrowsableForType(typeof(TabItem))] and/or [AttachedPropertyBrowsableForType(typeof(TabControl))] inside my MainWindow class and the following XAML
<Window x:Class="AP_Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:AP_Test"
mc:Ignorable="d"
Title="MainWindow" Height="400" Width="800">
<Window.Resources>
<Style TargetType="{x:Type TabControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition Name="ColumnDefinition0"/>
<ColumnDefinition Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Name="RowDefinition0" Height="Auto"/>
<RowDefinition Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<TabPanel Name="headerPanel"
Background="Transparent"
Grid.Column="0"
IsItemsHost="true"
Margin="2,2,2,0"
Grid.Row="0"
KeyboardNavigation.TabIndex="1"
Panel.ZIndex="1"/>
<Border Name="contentPanel"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Grid.Column="0"
KeyboardNavigation.DirectionalNavigation="Contained"
Grid.Row="1"
KeyboardNavigation.TabIndex="2"
KeyboardNavigation.TabNavigation="Local">
<DockPanel Background="White">
<Grid Name="TabControlHeader" DockPanel.Dock="Top" Height="65">
<Label x:Name="SelectedItemTitle" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24" Content="How to bind to AP ItemTitle?"/>
</Grid>
<Grid Name="Detail" Margin="8,0,8,8">
<Border BorderThickness="3,3,0,0" BorderBrush="DarkGray" CornerRadius="3"/>
<Border BorderThickness="2,2,1,1" BorderBrush="LightGray" CornerRadius="3"/>
<Border BorderThickness="1,1,1,1" BorderBrush="White" CornerRadius="3" Margin="3,3,-1,-1" Padding="5">
<Viewbox>
<ContentPresenter Name="PART_SelectedContentHost"
ContentSource="SelectedContent"
Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Viewbox>
</Border>
</Grid>
</DockPanel>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<TabControl x:Name="TabCtl">
<TabItem Header="Tab1" local:MainWindow.ItemTitle="Tab1 Title" />
<TabItem Header="Tab2" local:MainWindow.ItemTitle="Tab2 Title" />
<TabItem Header="Tab3" local:MainWindow.ItemTitle="Tab3 Title" />
</TabControl>
</Window>
I'd like the respective title entries to be displayed in the TabControl's SelectedItemTitle label.
Any hints appreciated, even a definitive "That's not possible" would be good to know, so I can stop trying 😁
The property (sub-)path for an attached property needs to be enclosed in parentheses:
Content="{Binding Path=SelectedItem.(local:MainWindow.ItemTitle),
RelativeSource={RelativeSource AncestorType=TabControl}}"
See PropertyPath for Objects in Data Binding for details.
An attached property is not even required. You could as well use the TabItem's Tag property like
<TabItem Header="Tab1" Tag="Tab1 Title"/>
with
Content="{Binding Path=SelectedItem.Tag,
RelativeSource={RelativeSource AncestorType=TabControl}}"

Get Header name

Hello I am a bit lost with the control Templates, I have an expander and some control-styles that apply onto the Expander.
So the idea is to let the User insert the header
<Expander Name="MyExpanderExpander" Style="{StaticResource MyExpanderNewGeneration}" Header="UserChoice" OverridesDefaultStyle="True" VerticalAlignment="Top" Margin="0,0,0,0" Height="210">
So now the Style : MyExpanderNewGeneration should get the header Name : UserChoic
The ToggleButton has to get the Header Name : UserChoice and here is my problem ..but how to do it?
my Style applying is
<Style TargetType="Expander" x:Key="MyExpanderNewGeneration" BasedOn="{StaticResource BaseControlStyle}" >
<!--x:Key="GroupBoxStyle"-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Expander">
<Grid>
<!--Grid Rows split the GroupBox into two areas -->
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--Header area-->
<Border Name="HeaderArea"
Grid.Row="0"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="1"
CornerRadius="2,2,0,0" >
<ToggleButton x:Name="ExpanderButton"
Grid.Row="0"
Grid.Column="0"
Margin="0,0,0,0"
VerticalAlignment="Top"
Template="{StaticResource TestToggleButton}"
Content="{TemplateBinding Header}"
IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
OverridesDefaultStyle="True">
</ToggleButton>
Herer I want to get the UserChoice Name.
<ControlTemplate x:Key="TestToggleButton" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Foreground="White" Width="300" Grid.Column="0" FontSize="15"
HorizontalAlignment="Left" FontWeight="Normal" Something={HEADER???}
How to solve this?
Since you are setting Content="{TemplateBinding Header}" in your ExpanderButton, you will need to bind to the Content property inside your TestToggleButton style's control template:
<ControlTemplate x:Key="TestToggleButton" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label
...
Content={TemplateBinding Content} />
...
</Grid>
</ControlTemplate>

Add ControlTemplate to AnimatedTabControl without overwriting animation behavior

I am using MahApps AnimatedTabControl and I need to create a ControlTemplate to add a ScrollViewer for header tabs. Here is my template:
<TabControl.Template>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ScrollViewer x:Name="_MainTabControlScrollViewer" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Disabled">
<TabPanel x:Name="HeaderPanel" IsItemsHost="True" Margin="0,4,0,0"/>
</ScrollViewer>
<ContentPresenter x:Name="PART_SelectedContentHost" Margin="4" ContentSource="SelectedContent" Grid.Row="1"/>
</Grid>
</ControlTemplate>
</TabControl.Template>
However, this kills the animation. Is there a way to inherit the default AnimatedTabControl behavior?
Instead overriding the TabControl just use the MetroAnimatedSingleRowTabControl.
<Controls:MetroAnimatedSingleRowTabControl x:Name="AnimatedTabControl">
<TabItem Header="tab test"></TabItem>
</Controls:MetroAnimatedSingleRowTabControl>
with xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
Hope that helps.

How to get TabPanel ActualWidth from TabControl

I have a tabcontrol and tab strip placement is on left. So it is a simple navigation menu type tab control.
There is a TabPanel inside TabControl's control template.
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid x:Name="Grid" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<Border x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local" Padding="{TemplateBinding Padding}" Margin="0,-1,0,0">
<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<ScrollViewer x:Name="scroll" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" Template="{StaticResource ScrollViewerTab}">
<TabPanel x:Name="HeaderPanel" IsItemsHost="true" Margin="0,2,0,0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1" VerticalAlignment="Bottom" />
</ScrollViewer>
</Grid>
</ControlTemplate>
I need TabPanel's (tab headers) ActualWidth outside tabcontrol for alignment purposes.
I tried following but it did not work.
<TextBlock Text="{Binding Path=Actualwidth, ElementName=HeaderPanel}" />
<TabControl />
I also tried to bind the ActualWidth of header panel to Tag property of TabControl. Even that did not work.
<TabControl Tag="{Binding Path=ActualWidth, ElementName=HeaderPanel}" />
TabControls.Items collection gives the list of ViewModel objects. So I cannot get TabItem instances.
I ended up using visual tree helper in the codebehind file
var tabPanel = VisualTreeHelpers.FindChild<TabPanel>(TabControl, "MenuPanel");

Pinned item inside silverlight scrollviewer

Is there a way to have a control inside silverlight scrollviewer that does not scroll? For example I would like the similar behavior as you get when pinning a column in a datagrid so that I can have a footer to my listbox but still have it fit inside the scroll bars (looks better that way). here is a screen shot of what I have. The control I want inside is at the bottom.
Per request here is my control template for the listbox. I have a template for scrollviewer to but could not find a way to tell it to leave the border at bottom when scrolling everything else. If you look at the template I have the border outside of the scrollviewer to keep it from being scrolled but would like it to fit inside the scrollbar because I think it looks better.
<ControlTemplate TargetType="telerik:RadListBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border BorderThickness="0" Background="{StaticResource ListBoxBackground}" Grid.RowSpan="2">
</Border>
<ScrollViewer x:Name="PART_ScrollViewer"
Margin="0"
IsTabStop="False"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
TabNavigation="{TemplateBinding TabNavigation}"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Style="{StaticResource ScrollViewerStyle}">
<ItemsPresenter/>
</ScrollViewer>
<Border Grid.Row="1" Background="Transparent" BorderBrush="Tan" BorderThickness="1" Height="50">
<TextBlock Text="Dont scroll but keep in scrollviewer" TextWrapping="Wrap"/>
</Border>
<ContentPresenter x:Name="dragVisualPlaceholder" Visibility="Collapsed" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</Grid>
</ControlTemplate>

Resources