locked
Combobox ToggleButton Chrome RRS feed

  • Question

  • Hi,

    I've modified a combobox so that only the text is visible. The problem is that the chrome in the toggle button still shows a line. how can I remove the chrome and keep the combo box working?

    Combobox Xaml:

    <ComboBox HorizontalAlignment="Left" Height="39" Margin="37.083,0,0,316" VerticalAlignment="Bottom" Width="253.917" Style="{DynamicResource ComboBoxMetroStyle}" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="White" FontFamily="Futura Lt BT" BorderThickness="0" FontSize="26.667">
                <ComboBoxItem Content="Company" FontSize="26.667" Foreground="#FF686868" IsSelected="True"/>
                <ComboBoxItem Content="Demo Logistics" Foreground="#FF686868" FontSize="26.667"/>
            </ComboBox>

    ToggleButton Xaml:

    <ToggleButton BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxReadonlyToggleButton}" Foreground="{x:Null}"/>

    Chrome Xaml:

    <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" SnapsToDevicePixels="true" RoundCorners="False">

    Thank you in advance.

    Monday, August 20, 2012 12:23 PM

All replies

  • Hi Genkimaru,

    here is the code..the below code solves your problem

    <Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
    x:Class="combobox.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">

    <Window.Resources>
    <Style x:Key="ComboBoxFocusVisual">
    <Setter Property="Control.Template">
    <Setter.Value>
    <ControlTemplate>
    <Rectangle Margin="4,4,21,4" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#F3F3F3" Offset="0"/>
    <GradientStop Color="#EBEBEB" Offset="0.5"/>
    <GradientStop Color="#DDDDDD" Offset="0.5"/>
    <GradientStop Color="#CDCDCD" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
    <Geometry x:Key="DownArrowGeometry">M 0 0 L 3.5 4 L 7 0 Z</Geometry>
    <Style x:Key="ComboBoxReadonlyToggleButton" TargetType="{x:Type ToggleButton}">
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="Focusable" Value="false"/>
    <Setter Property="ClickMode" Value="Press"/>
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type ToggleButton}">
    <Grid HorizontalAlignment="Stretch" Margin="0,0,4,4" Background="{TemplateBinding Background}">
    <Path x:Name="Arrow" Data="{StaticResource DownArrowGeometry}" Fill="Black" HorizontalAlignment="Right" Margin="3,1,0,0" VerticalAlignment="Center"/>
    </Grid>
    <ControlTemplate.Triggers>
    <Trigger Property="IsChecked" Value="true"/>
    <Trigger Property="IsEnabled" Value="false"/>
    </ControlTemplate.Triggers>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    <LinearGradientBrush x:Key="TextBoxBorder" EndPoint="0,20" MappingMode="Absolute" StartPoint="0,0">
    <GradientStop Color="#ABADB3" Offset="0.05"/>
    <GradientStop Color="#E2E3EA" Offset="0.07"/>
    <GradientStop Color="#E3E9EF" Offset="1"/>
    </LinearGradientBrush>
    <Style x:Key="ComboBoxEditableTextBox" TargetType="{x:Type TextBox}">
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="AllowDrop" Value="true"/>
    <Setter Property="MinWidth" Value="0"/>
    <Setter Property="MinHeight" Value="0"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
    <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type TextBox}">
    <ScrollViewer x:Name="PART_ContentHost" Background="Transparent" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    <Style x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="Focusable" Value="false"/>
    <Setter Property="ClickMode" Value="Press"/>
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type ToggleButton}">
    <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RoundCorners="false" SnapsToDevicePixels="true" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
    <Path x:Name="Arrow" Data="{StaticResource DownArrowGeometry}" Fill="Black" HorizontalAlignment="Center" Margin="0,1,0,0" VerticalAlignment="Center"/>
    </Microsoft_Windows_Themes:ButtonChrome>
    <ControlTemplate.Triggers>
    <Trigger Property="IsChecked" Value="true">
    <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
    </Trigger>
    <Trigger Property="IsEnabled" Value="false">
    <Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF"/>
    </Trigger>
    </ControlTemplate.Triggers>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    <ControlTemplate x:Key="ComboBoxEditableTemplate" TargetType="{x:Type ComboBox}">
    <Grid x:Name="Placement" SnapsToDevicePixels="true">
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
    <Microsoft_Windows_Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=Placement}">
    <Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
    <ScrollViewer x:Name="DropDownScrollViewer">
    <Grid RenderOptions.ClearTypeHint="Enabled">
    <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
    <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/>
    </Canvas>
    <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
    </Grid>
    </ScrollViewer>
    </Border>
    </Microsoft_Windows_Themes:SystemDropShadowChrome>
    </Popup>
    <Microsoft_Windows_Themes:ListBoxChrome x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}"/>
    <TextBox x:Name="PART_EditableTextBox" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsReadOnly="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}" Margin="{TemplateBinding Padding}" Style="{StaticResource ComboBoxEditableTextBox}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
    <ToggleButton Grid.Column="1" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxToggleButton}"/>
    </Grid>
    <ControlTemplate.Triggers>
    <Trigger Property="IsKeyboardFocusWithin" Value="true">
    <Setter Property="Foreground" Value="Black"/>
    </Trigger>
    <Trigger Property="IsDropDownOpen" Value="true">
    <Setter Property="RenderFocused" TargetName="Border" Value="true"/>
    </Trigger>
    <Trigger Property="HasItems" Value="false">
    <Setter Property="Height" TargetName="DropDownBorder" Value="95"/>
    </Trigger>
    <Trigger Property="IsEnabled" Value="false">
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
    <Setter Property="Background" Value="#FFF4F4F4"/>
    </Trigger>
    <Trigger Property="IsGrouping" Value="true">
    <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
    </Trigger>
    <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
    <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
    <Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
    </Trigger>
    <Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false">
    <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/>
    <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/>
    </Trigger>
    </ControlTemplate.Triggers>
    </ControlTemplate>
    <Style x:Key="ComboBoxStyle1" TargetType="{x:Type ComboBox}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource ComboBoxFocusVisual}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
    <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
    <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="Padding" Value="4,3"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
    <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
    <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type ComboBox}">
    <Grid x:Name="MainGrid" SnapsToDevicePixels="true">
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
    </Grid.ColumnDefinitions>
    <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
    <Microsoft_Windows_Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=MainGrid}">
    <Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
    <ScrollViewer x:Name="DropDownScrollViewer">
    <Grid RenderOptions.ClearTypeHint="Enabled">
    <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
    <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/>
    </Canvas>
    <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
    </Grid>
    </ScrollViewer>
    </Border>
    </Microsoft_Windows_Themes:SystemDropShadowChrome>
    </Popup>
    <ToggleButton BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxReadonlyToggleButton}"/>
    <ContentPresenter ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </Grid>
    <ControlTemplate.Triggers>
    <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
    <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
    <Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
    </Trigger>
    <Trigger Property="HasItems" Value="false">
    <Setter Property="Height" TargetName="DropDownBorder" Value="95"/>
    </Trigger>
    <Trigger Property="IsEnabled" Value="false">
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
    <Setter Property="Background" Value="#FFF4F4F4"/>
    </Trigger>
    <Trigger Property="IsGrouping" Value="true">
    <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
    </Trigger>
    <Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false">
    <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/>
    <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/>
    </Trigger>
    </ControlTemplate.Triggers>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    <Style.Triggers>
    <Trigger Property="IsEditable" Value="true">
    <Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>
    <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="Padding" Value="3"/>
    <Setter Property="Template" Value="{StaticResource ComboBoxEditableTemplate}"/>
    </Trigger>
    </Style.Triggers>
    </Style>
    </Window.Resources>

    <Grid x:Name="LayoutRoot">
    <ComboBox Height="56" Margin="192,88,216,0" VerticalAlignment="Top" Style="{DynamicResource ComboBoxStyle1}" Background="#02000000" BorderBrush="{x:Null}">
    <ComboBoxItem Content="ComboBoxItem"/>
    <ComboBoxItem Content="ComboBoxItem"/>
    </ComboBox>
    </Grid>
    </Window>

    --

    Sharathkumar11

    if it is useful mark it as answer


    sharathkumar11

    • Proposed as answer by sharathkumar11 Tuesday, October 16, 2012 1:21 PM
    Tuesday, October 16, 2012 1:20 PM