WPF ComboBoxItem not showing until mouseover - c#

I have a ComboBox with unbound items as shown in the XAML below. When the window containing this ComboBox opens, the ComboBox appears as if no ComboBoxItem is selected (even though SelectedIndex = 0) until the ComboBox or any other input control in the window is moused over. This mouseover seems to trigger an event causing the ComboBox to redraw/refresh, revealing the selection.
<Style x:Key="LineStyle" TargetType="Rectangle">
<Setter Property="Fill" Value="Black"/>
<Setter Property="Height" Value="3"/>
<Setter Property="Canvas.Top" Value="4"/>
</Style>
<ComboBox VerticalAlignment="Top" SelectedIndex="0">
<ComboBoxItem ToolTip="Solid" HorizontalAlignment="Center">
<Canvas Width="69" Height="11">
<Rectangle Style="{StaticResource LineStyle}" Width="69" Canvas.Left="0" />
</Canvas>
</ComboBoxItem>
<ComboBoxItem ToolTip="Dash" HorizontalAlignment="Center">
<Canvas Width="69" Height="11">
<Rectangle Style="{StaticResource LineStyle}" Width="11" Canvas.Left="0" />
<Rectangle Style="{StaticResource LineStyle}" Width="11" Canvas.Left="19" />
<Rectangle Style="{StaticResource LineStyle}" Width="11" Canvas.Left="38" />
<Rectangle Style="{StaticResource LineStyle}" Width="11" Canvas.Left="57" />
</Canvas>
</ComboBoxItem>
</ComboBox>
I had this exact same problem previously with a ComboBox with unbound items consisting of a StackPanel containing an Image and TextBlock. The workaround there was to bind the items rather than "hardcode" them in XAML, but that is not an option now. Is there an XAML solution to this blank ComboBox problem?
If I instead just use simple text-based ComboBoxItem like:
<ComboBoxItem Content="Solid" HorizontalAlignment="Center"/>
everything works fine. I am using the default ComboBox template in Visual Studio.

Related

ComboBox with fixed Header

I need to show a default text in my ComboBox, this text must not changed also when the user select an item of the Combobox, actually for do this I've created this structure:
<ComboBox ItemsSource="{Binding AvailableNations}" Width="160" Height="55" Margin="0, 0, 0, 15"
Text="Select Countries" IsEditable="True">
<ComboBox.ItemTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsChecked}" Content="{Binding Item.Name}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
this display as default text Select Countries but if I select an item the default text will disappear and the item selected will be displayed, how can I fix this?
You could use a Combined Template (ref post)
<Window.Resources>
<ResourceDictionary>
<DataTemplate x:Key="NormalItemTemplate" >
<CheckBox IsChecked="{Binding IsChecked}" Content="{Binding Item.Name}" />
</DataTemplate>
<DataTemplate x:Key="SelectionBoxTemplate" >
<TextBlock>Select Countries</TextBlock>
</DataTemplate>
<DataTemplate x:Key="CombinedTemplate">
<ContentPresenter x:Name="Presenter"
Content="{Binding}"
ContentTemplate="{StaticResource NormalItemTemplate}" />
<DataTemplate.Triggers>
<DataTrigger
Binding="{Binding RelativeSource={RelativeSource FindAncestor,ComboBoxItem,1}}"
Value="{x:Null}">
<Setter TargetName="Presenter" Property="ContentTemplate"
Value="{StaticResource SelectionBoxTemplate}" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ResourceDictionary>
</Window.Resources>
<Grid>
<ComboBox ItemsSource="{Binding AvailableNations}"
SelectedItem="{Binding SelectedNation}"
ItemTemplate="{StaticResource CombinedTemplate}"
Width="160" Height="55" Margin="0, 0, 0, 15" >
</ComboBox>
</Grid>
The way it works is described in the original answer. Note that the suggested solution will only work when IsEditable is set to false, I assume that won't be a problem in your case. Second, to get the text displayed at start up I bound SelectedItem (e.g. to the first item in the collection).
From the comments, it sounds like you just want the Select Countries text to display at all times, even when an item is selected.
Personally I would just go the simple route and place a TextBox on top of the ComboBox, and hide the Display Text of the ComboBox by using a Transparent Foreground color.
Here's a quick example demonstrating it :
<Grid>
<ComboBox SelectedIndex="1" Foreground="Transparent">
<ComboBox.Resources>
<Style TargetType="{x:Type ComboBoxItem}">
<!-- Make sure ComboBoxItems don't have transparent text -->
<Setter Property="Foreground" Value="{StaticResource {x:Static SystemColors.ControlTextBrushKey}}" />
</Style>
</ComboBox.Resources>
<ComboBoxItem>Test 1</ComboBoxItem>
<ComboBoxItem>Test 2</ComboBoxItem>
<ComboBoxItem>Test 3</ComboBoxItem>
</ComboBox>
<TextBlock Text="Select Countries" Margin="4,3" IsHitTestVisible="False" />
</Grid>
And the results (note that SelectedIndex = 1)
I'm sure there's other ways too, such as overwriting the way it paints the display text, or changing the control template, but this seemed like the easiest to me.

StackPanel Collapsed and Visible on Button Click

I am trying to show one collapsed stackpanel on button click, but I'm having problems so I tried reverse my thoughts and I was able to collapse an visible stackpanel. But unfortunately I was unable to implement the behavior I want, show an collapsed stack panel on button click. To the code :D
XAML
<Button x:Name="sentButton" Content="Add Friend" Style="{DynamicResource FlatButtonStyle}" Margin="493,0,0,0" HorizontalAlignment="Left" Width="106"/>
<StackPanel Style="{DynamicResource stackCollapsed}" Visibility="Collapsed">
<Label Content="Invite Friends" FontWeight="Bold" Margin="0,0,477,0" Height="32" />
<StackPanel Orientation="Horizontal" Margin="26,0,0,0">
<Label Content="Enter your friend's email" Width="222" Height="25" />
<TextBox Text="{Binding Email, UpdateSourceTrigger=PropertyChanged}" Style="{DynamicResource MyTextBox}" x:Name="textBoxEmail" Width="298"/>
<Button x:Name="button1" Content="Send" Command="{Binding AddCommand}" Width="77" Style="{DynamicResource FlatButtonStyle}" Margin="20,0,0,0"/>
</StackPanel>
</StackPanel>
Styles
<!-- Style Collapsed-->
<Style x:Key="stackCollapsed" TargetType="StackPanel">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=sentButton,Path=IsPressed}" Value="true">
<Setter Property="StackPanel.Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
Instead of Button use ToggleButton and bind StackPanel.Visibility to ToggleButton.IsChecked property via BooleanToVisibilityConverter converter
<ToggleButton x:Name="sentButton" Content="Add Friend" Margin="493,0,0,0" HorizontalAlignment="Left" Width="106"/>
<StackPanel Visibility="{Binding ElementName=sentButton, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}">
<Label Content="Invite Friends" FontWeight="Bold" Margin="0,0,477,0" Height="32" />
<StackPanel Orientation="Horizontal" Margin="26,0,0,0">
<Label Content="Enter your friend's email" Width="222" Height="25" />
<TextBox Text="{Binding Email, UpdateSourceTrigger=PropertyChanged}" x:Name="textBoxEmail" Width="298"/>
<Button x:Name="button1" Content="Send" Command="{Binding AddCommand}" Width="77" Margin="20,0,0,0"/>
</StackPanel>
</StackPanel>
where converter is defined as below
<Window.Resources>
<ResourceDictionary>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</ResourceDictionary>
</Window.Resources>
The problem is the Visibility property in the <StackPanel> tab takes a higher precedence than anything set in a Style or Trigger, so the Trigger never gets applied. See the Dependency Property Precedence List for more details.
To fix your current solution, move the Visibliity property out of the <StackPanel> tag and into your Style, like this :
<Style x:Key="stackCollapsed" TargetType="StackPanel">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=sentButton,Path=IsPressed}" Value="true">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
<StackPanel Style="{DynamicResource stackCollapsed}">
...
</StackPanel>
That said, I would personally recommend something like a Toggle Button with the StackPanel.Visibility bound to the ToggleButton.IsChecked, like this answer suggests.
I solved set the Children to null
stackPanel.Children.Clear();
this work if you need to show / hide the panel the first time, it doesn't work if you need to do runtime
Simple as Stackpanel.Visibility = Visibility.Collapsed.

Combobox ItemTemplate dont accept click

I made a Usercontrol with a Combobox with itemTemplate. I set a an event trigger for click on Item. but its not work completely. it dosent accept the click. around the template or empty place before my text.
this is my code
<Combobox>
<Combobox.ItemTemplate>
<DataTemplate>
<Grid Height="25" FlowDirection="RightToLeft">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25" />
<ColumnDefinition MinWidth="100" />
<ColumnDefinition Width="25" />
</Grid.ColumnDefinitions>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonUp">
<command:EventToCommand Command="{Binding Command}"
CommandParameter="{Binding CommandParameter}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<Image Height="20" Width="25" Grid.Column="0" VerticalAlignment="Center"
HorizontalAlignment="Center" />
<TextBlock Text="{Binding Title}" Grid.Column="1" VerticalAlignment="Center" />
<TextBlock Grid.Column="2" />
</Grid>
</DataTemplate>
</Combobox.ItemTemplate>
</Combobox>
it is a usercontrol that binds to a list of object contains Command and commandparameter, on click on each item one command should be raised.
Visual elements need to be assigned a brush in order for hit testing to take place.
(I did say IsHitTestVisibile so you wouldn't confuse the two).
You can do the following above your ItemTemplate in the Container that hosts it like so :
<ComboBox>
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem" BasedOn="{StaticResource {x:Type ComboBoxItem}}"> <!-- Or based on any other ComboboxItem style you have-->
<Setter Property="Background" Value="Transparent" />
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
FYI : IsHitTestVisibile is a flag stating that even if a Hit test did pass you can choose to disregard it.
What's wrong with SelectionChanged event of ListBox?
You could bind to that.
DataTemplate is for the data not for UI events. You use data-templates to tell WPF how you want to display data. At most you could have DataTriggers (which is again belong to data).
If you want to trap the click event on items, use ItemContainerStyle. The ItemContainerStyle is for styling the container of dataitem, which is ListBoxItem in this case.
Something of this sort might help:
<Style TargetType="ListBoxItem">
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
</EventTrigger>
</Style.Triggers>
</Style>

Passing DataContext in Telerik RadGridView

I use c# .NET 4.5 and WPF RadControls from Telerik.
On my MainWindow I have a RadTabControl and in my code behind I bind my MainViewModel like this:
this.DataContext = new MainViewmodel();
The ItemSource of the RadTabControl is bound in XAML:
<telerik:RadTabControl ... ItemsSourc={Binding Tabs} .. />
I also use a ContentSelector to load different Contents to my Tabs. These Contents are UserControls. On one UserControl I use a RadGRidView with it's own ItemsSource that I bind in the code behind:
TestGridView.ItemsSource = Tasks.GetTasks();
The RadGridView Columns bound to it's own style:
<telerik:RadGridView.Columns>
<telerik:GridViewDataColumn DataMemberBinding="{Binding ID}" Width="*" CellStyle="{StaticResource CellStyle}" />
</telerik:RadGridView.Columns>
<Style x:Key="CellStyle" TargetType="{x:Type telerik:GridViewCell}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="#f2f2f2" BorderThickness="0,0,0,2" Padding="0,5,0,5">
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical" Margin="10,0,0,0" VerticalAlignment="Top">
<TextBlock Text="{Binding Titel}" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Start}" Foreground="#9fa2ae"/>
<TextBlock Text=" XXX - XXX " />
<TextBlock Text="{Binding Startzeit}" Foreground="#9fa2ae" />
<telerik:RadButton Height="30" Content="Right Button" Command="{Binding AddTabCommand}" CommandParameter="Tab9999"/>
</StackPanel>
</StackPanel>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The Problem is that the RadButton does not fire the DelegateCommand of my MainViewModel. I have also the same Button in the UserControl out of the RadGridView, this works fine.
Please can somebody tell me how I can fix this problem of my RadButton in the RadGridView?
Thanks a lot
Best Regards
RR
PS: I have a simple project, but can't attach it
The reason why this is happening is that the binding on your RadButton is trying to find the AddTabCommand on the DataContext of the button, not the parent Window.
To fix this, I would advise setting the style inside the Window's resources, and instead of using this:
Command="{Binding AddTabCommand}"
Give the Window a name, and use this:
Command="{Binding ElementName=windowName, Path=DataContext.AddTabCommand}"
Agree with what Mike said its not finding AddTabCommand in your DataContext(ViewModel).
You can try with specifying whole path of the command :
Command="{Binding ElementName=windowName, Path=NameSapce_Name.ViewModelName.AddTabCommand}".

WPF: ListItem does not receive focus when you press the button located on this ListItem

I have a ListBox with a DataTemplate. The template has a Button on it. Each item in the list shows the entity.
<ListBox Grid.Column="0"
x:Name="ThemesList"
ItemsSource="{Binding Themes}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
SelectedItem="{Binding SelectedTheme}"
ItemTemplate="{StaticResource ThemeListTemplate}"/>
<DataTemplate x:Key="ThemeListTemplate">
<Grid Grid.Column="1"
Grid.Row="0"
HorizontalAlignment="Right"
Margin="10">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Grid.Row="0"
HorizontalAlignment="Left"
Style="{StaticResource ElementButton}"
Command="{Binding Path=DataContext.ThemeEditorViewModel.OpenThemeEditorCommand, ElementName=ThemesBacklog}"
CommandParameter="{Binding Path=SelectedItem, ElementName=ThemesList}">
<TextBlock Text="Edit"/>
</Button>
<Button Grid.Row="1"
HorizontalAlignment="Left"
Style="{StaticResource ElementButton}"
Command="{Binding Path=DataContext.ThemeDeleteCommand, ElementName=ThemesBacklog}"
CommandParameter="{Binding Path=SelectedItem, ElementName=ThemesList}">
<TextBlock Text="Delete"/>
</Button>
</Grid>
</DataTemplate>
When you click on Button in the command is passed the property value SelectedItem. When you click on ListItem and then click Button - all fine. When I at once click on the Button - in the command is passed null. That is ListItem does not receive focus when you press the button located on this ListItem. How to solve this problem?
You could examine the IsKeyboardFocusWithin property on the ListBoxItems in a trigger, to find out whether a child (like your button), has focus, and set IsSelected to true if that is the case.
You do this by setting the ItemContainerStyle like this:
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="IsSelected" Value="True" />
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>

Categories

Resources