i have made a ribbonsplitbutton. But i have no idea how i change the background color of the togglebutton used in ribbon split button.
The code i have done so far is this
<Custom:RibbonSplitButton LargeImageSource="Images\folder.jpg" Label="Open" HorizontalAlignment="Left" VerticalAlignment="Top" >
<Custom:RibbonMenuItem Header="find" ImageSource="Images\find.png"/>
<Custom:RibbonMenuItem Header="copy" ImageSource="Images\copy.png"/>
<Custom:RibbonMenuItem Header="calculator" ImageSource="Images\calculator.png"/>
<Custom:RibbonMenuItem Header="setting" ImageSource="Images\Setting.png"/>
<Custom:RibbonMenuItem Header="calender" ImageSource="Images\calender.png"/>
<Custom:RibbonMenuItem Header="print" ImageSource="Images\print.png"/>
</Custom:RibbonSplitButton>
Can someone help me to create a style for togglebutton.
you can change the style of toggle button in ribbon split button by changing the style of the part_toggle button
the sample code of style is
<Border x:Name="UnderlayBorder" Background="{Binding MouseOverBackground, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0.5" Visibility="Collapsed"/>
<Custom:RibbonToggleButton x:Name="PART_ToggleButton" BorderBrush="{TemplateBinding BorderBrush}" Background="Transparent" ToolTipService.BetweenShowDelay="0" CheckedBackground="{TemplateBinding CheckedBackground}" ClickMode="Press" CornerRadius="0,2,2,0" CheckedBorderBrush="{TemplateBinding CheckedBorderBrush}" FocusedBackground="{TemplateBinding FocusedBackground}" FocusedBorderBrush="{TemplateBinding FocusedBorderBrush}" FocusVisualStyle="{x:Null}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" ToolTipService.InitialShowDelay="900" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Label="{TemplateBinding Label}" MouseOverBackground="{TemplateBinding MouseOverBackground}" MouseOverBorderBrush="{TemplateBinding MouseOverBorderBrush}" PressedBorderBrush="{TemplateBinding PressedBorderBrush}" Padding="{TemplateBinding Padding}" PressedBackground="{TemplateBinding PressedBackground}" Custom:RibbonTwoLineText.PathData="M0,0L2.5,3 5,0z" Style="{x:Null}" ToolTipService.ShowDuration="20000" ToolTipDescription="{TemplateBinding DropDownToolTipDescription}" ToolTipFooterDescription="{TemplateBinding DropDownToolTipFooterDescription}" ToolTipImageSource="{TemplateBinding DropDownToolTipImageSource}" ToolTipFooterTitle="{TemplateBinding DropDownToolTipFooterTitle}" ToolTipFooterImageSource="{TemplateBinding DropDownToolTipFooterImageSource}" ToolTipTitle="{TemplateBinding DropDownToolTipTitle}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
<Custom:RibbonToggleButton.ControlSizeDefinition>
<Custom:RibbonControlSizeDefinition IsLabelVisible="False" ImageSize="Collapsed"/>
</Custom:RibbonToggleButton.ControlSizeDefinition>
<Custom:RibbonToggleButton.Template>
<ControlTemplate TargetType="{x:Type Custom:RibbonToggleButton}">
<Grid x:Name="MainGrid" SnapsToDevicePixels="True">
<Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}"/>
<Border x:Name="MiddleBorder" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" CornerRadius="{TemplateBinding CornerRadius}">
<Border x:Name="InnerBorder" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" CornerRadius="{TemplateBinding CornerRadius}" Padding="{TemplateBinding Padding}">
<StackPanel x:Name="StackPanel" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Image x:Name="PART_Image" RenderOptions.BitmapScalingMode="NearestNeighbor" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Height="32" Margin="{DynamicResource {ComponentResourceKey ResourceId=LargeImageMargin, TypeInTargetAssembly={x:Type Custom:Ribbon}}}" Source="{TemplateBinding LargeImageSource}" VerticalAlignment="Center" Width="32"/>
<Grid x:Name="Grid" HorizontalAlignment="Left" VerticalAlignment="Top" >
<Custom:RibbonTwoLineText x:Name="TwoLineText" Custom:RibbonTwoLineText.HasTwoLines="{TemplateBinding Custom:RibbonTwoLineText.HasTwoLines}" HorizontalAlignment="Center" LineStackingStrategy="BlockLineHeight" LineHeight="5" Margin="1,1,1,0" PathFill="{TemplateBinding Foreground}" Custom:RibbonTwoLineText.PathData="{TemplateBinding Custom:RibbonTwoLineText.PathData}" TextAlignment="Center" Text="{TemplateBinding Label}" VerticalAlignment="Top"/>
</Grid>
</StackPanel>
</Border>
</Border>
</Grid>
Related
I created the following wpf control called "InertListView" that it is a custom ListView:
<Plugins:InertListView ItemsSource="{Binding Path=Data.InputPorts}"
Grid.Column="0"
Background="Transparent"
BorderThickness="0"
BorderBrush="{x:Null}"
>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Path Name="LeftPort"
Fill="{Binding Color}"
go:Node.PortId="{Binding Type}"
Tag="Left"
go:Node.LinkableFrom="False"
go:Node.LinkableTo="True"
go:Node.ToSpot="MiddleLeft"
go:Node.LinkableMaximum="1"
Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Cursor="Hand"
Width="10.968"
Height="14"
Stretch="Fill"
StrokeThickness="2"
StrokeMiterLimit="2.75"
Stroke="#FF535755"
Data="F1 M 16.9835,22.9609C 16.7301,23.2861 16.1852,23.5528 15.7721,23.5528L 12.7187,23.553C 12.3071,23.553 11.9687,23.2161 11.9687,22.803L 11.9687,12.3032C 11.9687,11.8901 12.3071,11.5532 12.7187,11.5532L 15.7721,11.553C 16.1852,11.553 16.7301,11.8196 16.9835,12.1447L 20.7466,16.961C 21,17.2862 21,17.8195 20.7466,18.1447L 16.9835,22.9609 Z "
/>
<TextBlock x:Name="LabelPortLabel"
TextAlignment="Left"
FontFamily="/Connect IO;component/Fonts/#Segoe UI"
Grid.Column="1"
VerticalAlignment="Center"
FontSize="13"
Width="Auto"
Height="Auto"
Canvas.Top="0"
Text="{Binding Label}"
Margin="5 0 0 0"
Cursor="Arrow"
/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</Plugins:InertListView>
Below i show how i define the "InertListView":
public class InertListView : ListView
{
protected override DependencyObject GetContainerForItemOverride()
{
return new InertListViewItem();
}
}
public class InertListViewItem : ListViewItem
{
protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
{
//base.OnMouseLeftButtonDown(e);
//e.Handled = false;
}
}
My problem is that when i move the mouse over one of the ListViewItems appears a highlight blue rectangle. How can i avoid this behaviour?
Thanks in advance!
Ricardo
You'd need to change the template of the control. Something like this:
<Plugins:InertListView>
......
......
<Plugins:InertListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Bd"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Plugins:InertListView.ItemContainerStyle>
</Plugins:InertListView>
Override the HighlightBrush like below:
<Plugins:InertListView ItemsSource="{Binding Path=Data.InputPorts}"
Grid.Column="0"
Background="Transparent"
BorderThickness="0"
BorderBrush="{x:Null}"
>
<Plugins:InertListView.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent"/>
</Plugins:InertListView.Resources>
I'm into a situation where the number of items of a ContextMenu has gone to a number like 3 thousand. In this scenario, the ContextMenu takes lot of time in loading itself. I'm trying to do UI Virtualization but without any luck.
The sample code is as follows:
<RichTextBox x:Name="FMWpfPopupControlHost" ScrollViewer.CanContentScroll="True" VirtualizingStackPanel.IsVirtualizing="True" HorizontalAlignment="Left" Width="300" Height="600" Focusable="True" Loaded="onLoaded1">
<RichTextBox.ContextMenu >
<ContextMenu VirtualizingStackPanel.IsVirtualizing="True" ItemsSource="{Binding GetLabel, Source ={StaticResource model}}" ScrollViewer.CanContentScroll="True">
<ContextMenu.ItemTemplate>
<DataTemplate>
<TextBlock Initialized="TextBlock_Initialized" Text="{Binding getLabel}"/>
</DataTemplate>
</ContextMenu.ItemTemplate>
<ContextMenu.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel IsItemsHost="True" IsVirtualizing="True" VirtualizationMode="Recycling"/>
</ItemsPanelTemplate>
</ContextMenu.ItemsPanel>
<ContextMenu.Template>
<ControlTemplate>
<Border BorderThickness="{TemplateBinding Border.BorderThickness}" Padding="{TemplateBinding Control.Padding}" BorderBrush="{TemplateBinding Border.BorderBrush}" Background="{TemplateBinding Panel.Background}" SnapsToDevicePixels="True">
<ScrollViewer Padding="{TemplateBinding Control.Padding}" Focusable="False">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</ScrollViewer>
</Border>
</ControlTemplate>
</ContextMenu.Template>
</ContextMenu>
</RichTextBox.ContextMenu>
</RichTextBox>
Please guide me how can I resolve this issue?
Thanks!
Harsh Gupta
I was wondering if anyone had an example of how to style/template a combobox to only show a button at its default initial state. Kind of like the DropDownButton gallery for the ribbon bar. I would just like the user to be able to click a button and have the combobox items listed. When the selection is made it does not save the selected item in the text field because there is no text field only a button. Thanks :)
Here's some sample code:
Note that the ContentPresenter and PART_EditableTextBox have been commented out deliberately and they can be taken off from the template.
Also, you may want to customize the appearance of togglebutton and the popup.
<Window x:Class="HiddenTextComboBox.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<ControlTemplate x:Key="HiddenTextComboBox" TargetType="{x:Type ComboBox}">
<Grid>
<ToggleButton x:Name="DropDownToggle"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Margin="-1" HorizontalContentAlignment="Right"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,
RelativeSource={RelativeSource TemplatedParent}}">
<Path x:Name="BtnArrow" Height="4" Width="8"
Stretch="Uniform" Margin="0,0,4,0" Fill="Black"
Data="F1 M 300,-190L 310,-190L 305,-183L 301,-190 Z " />
</ToggleButton>
<!--<ContentPresenter x:Name="ContentPresenter" Margin="6,2,25,2"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}">
</ContentPresenter>
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Focusable="False"
Background="{TemplateBinding Background}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="3,3,23,3"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}"/>-->
<Popup x:Name="PART_Popup"
IsOpen="{TemplateBinding IsDropDownOpen}">
<Border x:Name="PopupBorder"
HorizontalAlignment="Stretch" Height="Auto"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="Black" Background="White" CornerRadius="3">
<ScrollViewer x:Name="ScrollViewer" BorderThickness="0" Padding="1">
<ItemsPresenter/>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</ControlTemplate>
</Window.Resources>
<Grid>
<ComboBox Height="23" Width="23" Template="{StaticResource HiddenTextComboBox}">
<ComboBoxItem>First</ComboBoxItem>
<ComboBoxItem>Second</ComboBoxItem>
<ComboBoxItem>Third</ComboBoxItem>
</ComboBox>
</Grid>
</Window>
Code adapted from: Customizing the Appearance of an Existing Control by Creating a ControlTemplate
I'm replacing the default Button template's ContentPresenter with a TextBlock, so the text can be trimmed when it's too long.
Works fine in WPF. In Silverlight the text gets pushed to one edge and cut off on the left, even when there's space on the right:
Template is nothing special, just replaced the ContentPresenter with the TextBlock:
<Border x:Name="bdrBackground"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" />
<Rectangle x:Name="rectMouseOverVisualElement"
Opacity="0">
<Rectangle.Fill>
<SolidColorBrush x:Name="rectMouseOverColor"
Color="{StaticResource MouseOverItemBgColor}"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="rectPressedVisualElement"
Opacity="0"
Style="{TemplateBinding Tag}"/>
<TextBlock x:Name="textblock"
Text="{TemplateBinding Content}"
TextTrimming="WordEllipsis"
TextWrapping="NoWrap"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle x:Name="rectDisabledVisualElement"
Opacity="0"
Style="{StaticResource RectangleDisabledStyle}"/>
<Rectangle x:Name="rectFocusVisualElement"
Opacity="0"
Style="{StaticResource RectangleFocusStyle}"/>
</Grid>
</ControlTemplate>
How do I fix this?
More info:
With the latest comment about HorizontalAlignment, it's clear that SL's implementation of TextTrimming differs from WPF's. In SL, TextTrimming only really works if the text is aligned left. SL isn't smart enough to align the text the way WPF does. For instance:
WPF button:
SL button with the textblock horizontalalignment = left:
SL button with textblock horizontalalignment = center:
There's an even simpler solution. I set the TextBlock's TextAlignment=Center. Works exactly like in WPF. Thanks for the help!
The problem will be that your HorizontalContentAlignment is set to "Center". Really WordEllipsis only makes sense when the HorizontalAlignment of the TextBlock is set to "Left".
Edit
Getting the desired behaviour try this:-
<Border HorizontalAlignment="Center"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextBlock x:Name="textblock"
Text="{TemplateBinding Content}"
TextTrimming="WordEllipsis"
TextWrapping="NoWrap"
Margin="{TemplateBinding Padding}" />
</Border>
I'm trying to make a TextBox template and I need to include a ScrollViewer in the template - basically I want to add some content (like line numbers) that needs to scroll along with the normal text.
The default template for the TextBox is like this:
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1" Opacity="1">
<Grid>
<Border x:Name="ReadOnlyVisualElement" Background="#5EC9C9C9" Opacity="0"/>
<Border x:Name="MouseOverBorder" BorderBrush="Transparent" BorderThickness="1">
<ScrollViewer x:Name="ContentElement" BorderThickness="0" IsTabStop="False" Padding="{TemplateBinding Padding}"/>
</Border>
</Grid>
</Border>
If I change the ContentElement from ScrollViewer to Border, for example, the TextBox behaves normally - i just lose the scrolling ability.
Now, if I wrap the ContentElement with a ScrollViewer, it no longer displays the caret and selection - if you type, it still gets updated though.
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1" Opacity="1">
<Grid>
<Border x:Name="ReadOnlyVisualElement" Background="#5EC9C9C9" Opacity="0"/>
<Border x:Name="MouseOverBorder" BorderBrush="Transparent" BorderThickness="1">
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" >
<Border x:Name="ContentElement" BorderThickness="0" Padding="{TemplateBinding Padding}" />
</ScrollViewer>
</Border>
</Grid>
</Border>
Any idea why this happens and how can I fix it?
Just a shot in the dark, as I have not verified...but the control may be looking for a TemplatePart named ContentElement of type ScrollViewer.