Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
345
how to change RibbonButtonChrome border properties
posted

I have a segmented MenuTool and below is current control template:

<ControlTemplate x:Key="MenuButtonAreaSegmented" TargetType="{x:Type igRibbon:MenuButtonArea}">

<Grid x:Name="root">
<Grid.RowDefinitions>
<RowDefinition x:Name="row0" Height="*" />
<RowDefinition x:Name="row1" Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<Image x:Name="imgBackground"
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="0"
Grid.RowSpan="3"
Source="/WpfApplication2;component/Resources/default.png"
SnapsToDevicePixels="True"
MaxHeight="26"
Height="26"
Width="29"
Stretch="UniformToFill"
Visibility="Collapsed" />

<ToggleButton x:Name="PART_SegmentedButton"
Margin="2"
Command="{x:Static igRibbon:MenuTool.SegmentedButtonCommand}"
Opacity="1"
Style="{StaticResource PlainContentControlStyle}">
<ToggleButton.Content>
<!--<igRibbon:RibbonButtonChrome x:Name="buttonChrome"
ClipToBounds="True"
IsPressed="{Binding Path=IsPressed,
ElementName=PART_SegmentedButton}"
IsSegmentedButton="True"
SnapsToDevicePixels="True">-->
<Grid x:Name="btnChromeChild"
Margin="1"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>

<ColumnDefinition x:Name="col0" Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<!-- Background="{StaticResource BaseSelectedBrush}" -->

<igWindows:SynchronizedSizeDecorator x:Name="syncImage"
SynchronizeHeight="False"
SynchronizeWidth="False"
Target="{Binding ElementName=syncText}">
<igWindows:AutoDisabledImage x:Name="image"
Width="16"
Height="16"
Margin="2"
igRibbon:XamRibbon.KeyTipPlacementType="SmallImage"
igWindows:Utilities.SnapElementToDevicePixels="True"
Source="{Binding Path=MenuTool.ImageResolved,
RelativeSource={x:Static RelativeSource.TemplatedParent}}"
Visibility="{Binding Path=MenuTool.HasImage,
RelativeSource={x:Static RelativeSource.TemplatedParent},
Converter={StaticResource BoolToVisConverter}}" />
<!--<igWindows:AutoDisabledImage x:Name="image1"
Width="16"
Height="16"
Margin="2"
igRibbon:XamRibbon.KeyTipPlacementType="SmallImage"
igWindows:Utilities.SnapElementToDevicePixels="True"
Source="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=MenuTool.(behaviors:HoverSmallLargeImage.LargeHoverImage)}"
Visibility="Collapsed" />-->
</igWindows:SynchronizedSizeDecorator>
<ContentPresenter x:Name="textSmall"
Grid.Column="1"
Margin="0,0,0,0"
VerticalAlignment="Center"
igRibbon:RibbonGroupPanel.SizingModeVersion="{TemplateBinding igRibbon:RibbonGroupPanel.SizingModeVersion}"
Content="{Binding Path=MenuTool.Caption,
RelativeSource={x:Static RelativeSource.TemplatedParent},
Converter={StaticResource stringWithoutMnemonicsConverter}}"
SnapsToDevicePixels="True"
TextBlock.TextAlignment="Left" />
</Grid>
<!--</igRibbon:RibbonButtonChrome>-->
</ToggleButton.Content>
</ToggleButton>

<igRibbon:DropDownToggle x:Name="dropDownBtn"
Margin="-2,0,0,0"
Grid.Column="1"
IsDroppedDown="{Binding Path=MenuTool.IsOpen,
RelativeSource={x:Static RelativeSource.TemplatedParent}}"
Style="{StaticResource PlainContentControlStyle}">
<igRibbon:DropDownToggle.Content>
<igRibbon:RibbonButtonChrome x:Name="dropdownChrome"
ClipToBounds="True"
IsChecked="{Binding Path=IsDroppedDown,
ElementName=dropDownBtn}"
IsPressed="{Binding Path=IsPressed,
ElementName=dropDownBtn}"
Panel.ZIndex="1"
SnapsToDevicePixels="True">
<Border Name="border" BorderThickness="0" CornerRadius="3" BorderBrush="Transparent">
<Grid x:Name="dropdownPanel" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>

<ColumnDefinition x:Name="dropDownCol" />
</Grid.ColumnDefinitions>
<Control x:Name="dropdownArrow"
Margin="1,0,0,0"
igRibbon:XamRibbon.KeyTipPlacementType="DropDownButton"
Style="{DynamicResource {x:Static igRibbon:MenuTool.MenuToolDropDownArrowStyleKey}}" />
<igWindows:SynchronizedSizeDecorator x:Name="syncText"
SynchronizeHeight="False"
SynchronizeWidth="False"
Target="{Binding ElementName=syncImage}">
<igRibbon:LargeToolCaptionPresenter x:Name="textLarge"
igRibbon:RibbonGroupPanel.SizingModeVersion="{TemplateBinding igRibbon:RibbonGroupPanel.SizingModeVersion}"
Text="{Binding Path=MenuTool.Caption,
RelativeSource={x:Static RelativeSource.TemplatedParent},
Converter={StaticResource stringWithoutMnemonicsConverter}}"
Visibility="Collapsed">
<igRibbon:LargeToolCaptionPresenter.Glyph>
<Control Margin="0,4,0,0" Style="{DynamicResource {x:Static igRibbon:MenuTool.MenuToolDropDownArrowStyleKey}}" />
</igRibbon:LargeToolCaptionPresenter.Glyph>
</igRibbon:LargeToolCaptionPresenter>
</igWindows:SynchronizedSizeDecorator>
</Grid>
</Border>
</igRibbon:RibbonButtonChrome>
</igRibbon:DropDownToggle.Content>
</igRibbon:DropDownToggle>
<Border x:Name="ToggleBG"
Grid.Row="1"
Grid.ColumnSpan="2"
HorizontalAlignment="Stretch"
Opacity="0" />

</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName=dropDownBtn, Path=IsDroppedDown}" Value="true">
<!--<Setter TargetName="root" Property="Background" Value="#FF2DA5DA" />-->
<Setter Property="Foreground" Value="{DynamicResource {x:Static igRibbon:RibbonBrushKeys.TextHottrackFillKey}}" />
<!--<Setter TargetName="image1" Property="Visibility" Value="Visible" />
<Setter TargetName="image" Property="Visibility" Value="Collapsed" />-->
</DataTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{DynamicResource {x:Static igRibbon:RibbonBrushKeys.TextHottrackFillKey}}" />
<!--<Setter TargetName="image1" Property="Visibility" Value="Visible" />-->
<!--<Setter TargetName="image" Property="Visibility" Value="Collapsed" />-->
<Setter TargetName="imgBackground" Property="Visibility" Value="Visible" />
<Setter TargetName="imgBackground" Property="Source" Value="/WpfApplication2;component/Resources/hover_seg.png" />
<!--<Setter TargetName="root" Property="Background" Value="#FF2DA5DA" />
<Setter TargetName="ToggleBG" Property="BorderBrush" Value="White" />
<Setter TargetName="ToggleBG" Property="BorderThickness" Value="0,0,0,1" />-->
<Setter TargetName="border" Property="Background" Value="Transparent"/>
<Setter TargetName="border" Property="BorderBrush" Value="Yellow"/>
</Trigger>

<DataTrigger Binding="{Binding Path=IsPressed, ElementName=PART_SegmentedButton}" Value="true">
<Setter TargetName="imgBackground" Property="Visibility" Value="Visible" />
<Setter TargetName="imgBackground" Property="Source" Value="/WpfApplication2;component/Resources/pressed.png" />
</DataTrigger>

<Trigger SourceName="PART_SegmentedButton" Property="IsEnabled" Value="False">
<Setter TargetName="textSmall" Property="TextElement.Foreground" Value="{DynamicResource {x:Static igRibbon:RibbonBrushKeys.ToolDisabledForegroundTextFillKey}}" />
</Trigger>

<Trigger SourceName="dropDownBtn" Property="IsEnabled" Value="False">
<Setter TargetName="textLarge" Property="TextElement.Foreground" Value="{DynamicResource {x:Static igRibbon:RibbonBrushKeys.ToolDisabledForegroundTextFillKey}}" />
</Trigger>

<!--<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsCheckable}" Value="true" />
<Condition Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MenuTool.IsChecked}" Value="true" />
</MultiDataTrigger.Conditions>
<Setter TargetName="image1" Property="Visibility" Value="Visible" />
</MultiDataTrigger>-->
<Trigger Property="IsCheckable" Value="True">
<Setter TargetName="PART_SegmentedButton" Property="IsChecked" Value="{Binding Path=MenuTool.IsChecked, RelativeSource={x:Static RelativeSource.TemplatedParent}, Mode=OneWay}" />
<Setter TargetName="ToggleBG" Property="Opacity" Value="1" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="SizingMode" Value="ImageOnly" />
<Condition Property="HasImage" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="textSmall" Property="Visibility" Value="Collapsed" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="SizingMode" Value="ImageAndTextLarge" />
<Condition Property="Location" Value="Ribbon" />
</MultiTrigger.Conditions>
<Setter TargetName="dropdownArrow" Property="Visibility" Value="Collapsed" />
<Setter TargetName="textSmall" Property="Visibility" Value="Collapsed" />
<Setter TargetName="textLarge" Property="Visibility" Value="Visible" />
<!--<Setter TargetName="image1" Property="Width" Value="32" />
<Setter TargetName="image1" Property="Margin" Value="0,0,0,2" />
<Setter TargetName="image1" Property="Height" Value="32" />
<Setter TargetName="image1" Property="HorizontalAlignment" Value="Center" />-->

<Setter TargetName="image" Property="Width" Value="32" />
<Setter TargetName="image" Property="Height" Value="32" />
<Setter TargetName="image" Property="Margin" Value="0,0,0,2" />
<Setter TargetName="image" Property="HorizontalAlignment" Value="Center" />
<!--<Setter TargetName="syncImage" Property="SynchronizeWidth" Value="True" />-->
<Setter TargetName="syncText" Property="SynchronizeWidth" Value="True" />
<Setter TargetName="dropDownCol" Property="Width" Value="Auto" />

<Setter TargetName="dropDownBtn" Property="Grid.Column" Value="0" />
<Setter TargetName="dropDownBtn" Property="Grid.Row" Value="2" />
<Setter TargetName="PART_SegmentedButton" Property="Grid.RowSpan" Value="2" />
<Setter TargetName="row0" Property="Height" Value="Auto" />
<Setter TargetName="row1" Property="Height" Value="*" />
<Setter TargetName="btnChromeChild" Property="Margin" Value="1,1,1,0" />
</MultiTrigger>
<DataTrigger Binding="{Binding Path=MenuTool.(igRibbon:XamRibbon.HideAccessKey), RelativeSource={x:Static RelativeSource.TemplatedParent}}" Value="False">
<Setter TargetName="textSmall" Property="RecognizesAccessKey" Value="True" />
<Setter TargetName="textSmall" Property="Content" Value="{Binding Path=(igRibbon:ButtonTool.Caption), RelativeSource={x:Static RelativeSource.TemplatedParent}}" />
</DataTrigger>

<!--<Trigger Property="Location" by Tommy
Value="QuickAccessToolbar">
-->
<!--<Setter Property="Margin" Value="0,-2,0,0"/>-->
<!--
<Setter Property="Visibility"
Value="Visible"
TargetName="image1" />
<Setter Property="Visibility"
Value="Collapsed"
TargetName="image" />
-->
<!--<Setter Property="Padding" TargetName="buttonChrome" Value="0,2,0,0"/>-->
<!--<Setter Property="Padding" TargetName="dropdownChrome" Value="0,2,0,0"/>-->
<!--
<Setter Property="Foreground"
Value="{DynamicResource {x:Static igRibbon:RibbonBrushKeys.ToolInQATForegroundTextFillKey}}" />
</Trigger>-->

</ControlTemplate.Triggers>
</ControlTemplate>

when i mouse over the dropdown toggle, there always a border which i cannot figure out where it comes from (my guess is RibbonButtonChrome: dropdownChrome)

I cannot make any changes for that border (borderbrush, thickness or corners). Any suggestions on it plz?

Parents
No Data
Reply
  • 960
    Offline posted

    Hello,

    I am just checking the progress of this issue and wondering if you managed to achieve your goal or if you need any further assistance on the matter.


    Best Regards,

    Noriko I.
    Developer Support Engineer
    Infragistics Inc.

Children
No Data