Jan Kučera

Hello, I know this is quite individual question, but I'd welcome if somebody could point me in the right direction.

The template is:

Code Snippet

<Style x:Key="DropArrow" TargetType="{x:Type Polygon}">

<Setter Property="Points" Value="0,0 7,0 3.5,4" />

<Setter Property="Cursor" Value="Hand" />

<Setter Property="Fill">

<Setter.Value>

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

<GradientStop Color="#0256BE" Offset="0" />

<GradientStop Color="#133BA4" Offset="1" />

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Style.Triggers>

<Trigger Property="IsMouseOver" Value="True">

<Setter Property="BitmapEffect">

<Setter.Value>

<OuterGlowBitmapEffect GlowColor="#7FB9D3" GlowSize="2" />

</Setter.Value>

</Setter>

</Trigger>

</Style.Triggers>

</Style>

<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<Polygon Grid.Column="1" x:Name="Arrow"

Style="{StaticResource DropArrow}"

VerticalAlignment="Center" />

</Grid>

<ControlTemplate.Triggers>

<Trigger Property="ToggleButton.IsMouseOver" Value="true">

<Setter TargetName="Arrow" Property="BitmapEffect">

<Setter.Value>

<OuterGlowBitmapEffect GlowColor="#7FB9D3" GlowSize="2" />

</Setter.Value>

</Setter>

</Trigger>

<Trigger Property="ToggleButton.IsChecked" Value="true">

<Setter TargetName="Arrow" Property="BitmapEffect">

<Setter.Value>

<OuterGlowBitmapEffect GlowColor="#7FB9D3" GlowSize="2" />

</Setter.Value>

</Setter>

</Trigger>

<Trigger Property="IsEnabled" Value="False">

<Setter TargetName="Arrow" Property="Fill"

Value="{DynamicResource {x:Static SystemColors.GrayTextBrush}}" />

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

<Style x:Key="arrowCombo" TargetType="ComboBox">

<Setter Property="OverridesDefaultStyle" Value="true"/>

<Setter Property="IsEditable" Value="False" />

<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>

<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>

<Setter Property="ScrollViewer.CanContentScroll" Value="true" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="ComboBox">

<Grid>

<ToggleButton Name="ToggleButton"

Template="{StaticResource ComboBoxToggleButton}"

Focusable="false"

IsChecked="{Binding Path=IsDropDownOpen,

Mode=TwoWay,

RelativeSource={RelativeSource TemplatedParent}}"

ClickMode="Press" />

<ContentPresenter Name="ContentSite" IsHitTestVisible="False"

Content="{TemplateBinding SelectionBoxItem}"

ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"

Margin="0,0,11,0"

ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"

VerticalAlignment="Center"

HorizontalAlignment="Left" />

<Popup Name="Popup" Placement="Bottom"

IsOpen="{TemplateBinding IsDropDownOpen}"

AllowsTransparency="True" Focusable="False"

PopupAnimation="Slide">

<Grid Name="DropDown" SnapsToDevicePixels="True"

MinWidth="{TemplateBinding ActualWidth}"

MaxHeight="{TemplateBinding MaxDropDownHeight}">

<Border x:Name="DropDownBorder" BorderThickness="1"

BorderBrush="#E5E5E5" Background="White" />

<ScrollViewer Margin="4,6" SnapsToDevicePixels="True">

<StackPanel IsItemsHost="True"

KeyboardNavigation.DirectionalNavigation="Contained" />

</ScrollViewer>

</Grid>

</Popup>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

I've make this with help of combobox template dump and MSDN combobox template example.

Problems I face are:

1) The ComboBox is not showing the selected item. It actually selects the item, as I can see with help of binding, but the item shown next to the dropdown arrow does not change. Even when I replace the items collection with completely different items!

2) I have to click the polygon to open the drop-down (and see the glow effect). How do I make it open (glowed) by clicking anywhere in the area of combobox, not just the tiny arrow

3) Any general bad design comments welcomed...

Thank you very much for your effort and help.

Jan



Re: Windows Presentation Foundation (WPF) ComboBox not showing selected item (what's wrong with my template?)

Yi-Lun Luo - MSFT

Hello, I can¡¯t reproduce your first problem. It works fine for me. For the second problem, you need to give your Grid in the ToggleButton¡¯s Template a Background, such as:

<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">

<Grid Background="{TemplateBinding Background}">

Without a Background, the Grid won¡¯t be able to get mouse input.






Re: Windows Presentation Foundation (WPF) ComboBox not showing selected item (what's wrong with my template?)

Jan Ku?era

Hi. Thank you for trying it out. I still cannot imagine why there was the problem with selection, but I have changed the control (inherited and added SelectedItemTemplate) and

ContentTemplate="{TemplateBinding SelectedItemTemplate}"

from that time everything works nice.

I understand the thing with background, but it brings two questions to me. First, the Grid didn't get the input even on the text glyphs, why And second, How do I set the Background default value I mean, if I set it even to Transparent, it works, but I'd like the user to override it in style.

Thanks, Jan





Re: Windows Presentation Foundation (WPF) ComboBox not showing selected item (what's wrong with my template?)

Yi-Lun Luo - MSFT

That's why I suggested you to use a TemplateBinding for the Grid's Background. Now if you set a Background for the ToggleButton, the whole Grid will appear in that color. You can further bind the ToggleButton's Background to the ComboBox's Background by using another TemplateBinding.






Re: Windows Presentation Foundation (WPF) ComboBox not showing selected item (what's wrong with my template?)

Jan Ku?era

Actually this is the first thing I tried (toggle button grid to take bakground from template and the toggle button itself to take it from template), but it got a gradient gray background (no idea where from). I solved this by setting the Grid background in togglebutton template to transparent and the Grid in combobox template binding to the templated control background.

Thanks for help.