I want to display a ComboBox as TextBox (without border, background, toggle button, ect.) - only current selected item text.
I do like this, but I can not understand how to link TextBlock, so that it displays the currently selected item in the ComboBox.
<ComboBox ItemsSource="{Binding Path=...}" SelectedValue="{Binding Path=...}" DisplayMemberPath="Name" SelectedValuePath="Id">
<ComboBox.Template>
<ControlTemplate>
<TextBlock Text="{Binding ?}"></TextBlock>
</ControlTemplate>
</ComboBox.Template>
</ComboBox>
<ComboBox ItemsSource="{Binding Path=...}" SelectedValue="{Binding Path=...}" DisplayMemberPath="Name" SelectedValuePath="Id">
<ComboBox.Template>
<ControlTemplate>
<TextBlock Text="{Binding SelectedItem.MyText,RelativeSource={RelativeSource Mode=TemplatedParent}}"></TextBlock>
</ControlTemplate>
</ComboBox.Template>
You should specify TargetType in ControlTemplate and bind to SelectionBoxItem
Use this:
<ComboBox>
<ComboBox.Template>
<ControlTemplate TargetType="{x:Type ComboBox}">
<TextBlock Text="{TemplateBinding SelectionBoxItem}" />
</ControlTemplate>
</ComboBox.Template>
<ComboBoxItem Content="Item1" IsSelected="True" />
<ComboBoxItem Content="sdff" />
</ComboBox>
Related
I'm about to design a DropDown in WPF using XAML. If my text gets longer than the Width my DropDown element of the ComboBox is larger than the TextBox (as shown by the red arrow). Texts beeing to long are handled by an elllipsis (...).
Any ideas how to correct this?
This is my current XAML code:
<ItemsControl x:Name="ItemsControl"
ItemsSource="{Binding FilterUiModels}">
<ItemsControl.ItemTemplate>
<DataTemplate x:Name="UiModelTemplate">
<ComboBox x:Name="FilterComboBox"
ItemsSource="{Binding AvailableItems}"
SelectedItem="{Binding FilterItem}"
ScrollViewer.CanContentScroll="False"
Width="200">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Width="{Binding ActualWidth, ElementName=FilterComboBox}"
Text="{Binding}"
TextTrimming="CharacterEllipsis">
</TextBlock>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Bind the Width of the Popup to the Width of the ComboBox and set the ScrollViewer.HorizontalScrollBarVisibility attached property to false to hide any horizontal scrollbar:
<ComboBox x:Name="FilterComboBox"
ItemsSource="{StaticResource localTimeList}"
SelectedItem="{Binding FilterItem}"
ScrollViewer.CanContentScroll="False"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Width="200">
<ComboBox.Resources>
<Style TargetType="Popup">
<Setter Property="Width" Value="{Binding ActualWidth, ElementName=FilterComboBox}"/>
</Style>
</ComboBox.Resources>
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Width="{Binding ActualWidth, ElementName=FilterComboBox}"
Text="{Binding}"
TextTrimming="CharacterEllipsis">
</TextBlock>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
On click of toggle button I want to show a context menu. As I want to change the visual appearance of context menu, I have created controltemplate and data template as below,
<TabItem>
<TabItem.HeaderTemplate>
<DataTemplate>
<ContextMenu ItemSource="{Binding Collection}">
<ContextMenu.Template>
<ControlTemplate>
<Grid Margin="10">
<ListBox Width="150" Height="70"/>
</Grid>
</ControlTemplate>
<ContextMenu.ItemTemplate>
<DataTemplate>
<StackPanel>
<CheckBox Content="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</ContextMenu.ItemTemplate>
</ContextMenu.Template>
</ContextMenu>
</DataTemplate>
</TabItem.HeaderTemplate>
</TabItem>
Post this change I could see only a LisBox being shown clicking upon toggle button. I am not able to visualize the Data template that I had set (Checkbox). Data binding is also not working. Not able to figure out what could be the issue.
You should bind the ItemsSource property of the ListBox to the ItemsSource of the ContextMenu and define an ItemTemplate for the ListBox:
<ContextMenu ItemsSource="{Binding Collection}">
<ContextMenu.Template>
<ControlTemplate TargetType="ContextMenu">
<Grid Margin="10">
<ListBox ItemsSource="{TemplateBinding ItemsSource}" Width="150" Height="70">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</ControlTemplate>
</ContextMenu.Template>
</ContextMenu>
I'm trying to add a tooltip for each username(CreatedBy) in my combobox in case the user name is too long for the width of the combobox.
I know this question has been asked a million times, I've tried using Style.Triggers method and I have also tried
ToolTip="{Binding Path=SelectedCreatedBy.ToolTip, RelativeSource={RelativeSource Self}}
<ComboBox ItemsSource="{Binding CreatedBys.DefaultView}" SelectedValue="{Binding SelectedCreatedBy,UpdateSourceTrigger=PropertyChanged}" SelectedValuePath="CreatedBy" DisplayMemberPath="CreatedBy" ToolTip="{Binding SelectedCreatedBy}"
Grid.Row="3" Grid.Column="12" Height="22" Width="85" FontSize="11" IsEditable="{Binding IsCreatedByEditable}" VerticalAlignment="Top" HorizontalAlignment="Left" >
Edit: I found the solution and I will post the code here
<ComboBox ItemsSource="{Binding CreatedBys.DefaultView}" SelectedValue="{Binding SelectedCreatedBy,UpdateSourceTrigger=PropertyChanged}" SelectedValuePath="CreatedBy" DisplayMemberPath="CreatedBy" ToolTip="{Binding SelectedCreatedBy}"
Grid.Row="3" Grid.Column="12" Height="22" Width="85" FontSize="11" IsEditable="{Binding IsCreatedByEditable}" VerticalAlignment="Top" HorizontalAlignment="Left" >
<ComboBox.ItemContainerStyle>
<Style>
<Setter Property="Control.ToolTip" Value="{Binding CreatedBy}" />
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
If I understand correctly, you want a tool tip to appear for each of your combo box choices (not just the selected one). If that's the case, add the following code inside your ComboBox:
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock
Text="{Binding CreatedBy}"
ToolTip="{Binding ToolTip}"
/>
</DataTemplate>
</ComboBox.ItemTemplate>
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ComboBox.ItemContainerStyle>
The ItemTemplate defines a TextBlock for each item with a ToolTip bound to the ToolTip property of your view model. The ItemContainerStyle stretches the ComboBoxItem so that the tool tip appears even if the mouse is not directly on the text but over the item.
I've got a combo box of checkboxes that allow the user to select multiple temperature bands. When the users clicks on the checkbox, or the text directly next to the checkbox, the boxes are checked correctly, and my combobox text updates to add/remove the selected temperature. However if I check in the area of my combobox drop down to the right of the text, the checkbox isn't toggled, and instead I get namespace text in my combo box.
Here's my XAML
<ComboBox x:Name="cbDegrees" ItemsSource="{Binding m_DegreeValues}" Text="Degrees" IsEditable="True" IsReadOnly="True" Grid.Row="0" Grid.Column="0" Margin="5" Background="Gray" >
<ComboBox.ItemTemplate>
<DataTemplate>
<CheckBox Name="chkDegrees" Content="{Binding Name}" Checked="Degrees_CheckBox_Click" Unchecked="Degrees_CheckBox_Click" IsChecked="{Binding Path=IsSelected, Mode=TwoWay}">
</CheckBox>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
I would like to have the checkbox toggled when I click anywhere in the line item for the temperature.
The default ComboBoxItem that is generated is not set to stretch and fill all available space. You can see this if you wrap your ComboBox in something like a DockPanel with it's Background property set.
<ComboBox.ItemTemplate>
<DataTemplate>
<DockPanel Background="CornflowerBlue">
<CheckBox Name="chkDegrees" Content="{Binding Name}" .. />
</DockPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
To fix it, set your ComboBoxItem style so it sets the HorizontalContentAlignment to Stretch
<ComboBox.Resources>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ComboBox.Resources>
You could define an ItemContainerStyle that makes the CheckBox stretch horizontally:
<ComboBox x:Name="cbDegrees" ItemsSource="{Binding m_DegreeValues}" Text="Degrees" IsEditable="True" IsReadOnly="True" Grid.Row="0" Grid.Column="0" Margin="5" Background="Gray" >
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ComboBox.ItemContainerStyle>
<ComboBox.ItemTemplate>
<DataTemplate>
<CheckBox Name="chkDegrees" Content="{Binding Name}" Checked="Degrees_CheckBox_Click" Unchecked="Degrees_CheckBox_Click" IsChecked="{Binding Path=IsSelected, Mode=TwoWay}">
</CheckBox>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
I have a combobox with checkbox and items, How do i select the particular item or multi item when checked in combobox.. Need help.. Below i tried code..
<UserControl.Resources>
<DataTemplate x:Key="cmbIndex">
<CheckBox IsChecked="{Binding Path=IsSelected, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Tag="{RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}"
Content="{Binding}"
Click="CheckBox_Click">
</CheckBox>
</DataTemplate>
<CollectionViewSource x:Key="coll" Source="{Binding CMDCollection}"/>
<UserControl.Resources>
<ComboBox Grid.Row="0"
HorizontalAlignment="Left" Margin="80,0,0,0"
SelectedItem="{Binding T3Command}"
Height="20" VerticalAlignment="Center" Width="60"
FontFamily="Calibri" FontSize="12">
<ComboBox.ItemsSource>
<CompositeCollection>
<ComboBoxItem>
<CheckBox x:Name="all">Select All</CheckBox>
</ComboBoxItem>
<CollectionContainer Collection="{Binding Source={StaticResource coll}}"/>
</CompositeCollection>
</ComboBox.ItemsSource>
<ComboBox.ItemTemplate>
<DataTemplate>
<CheckBox Name="chkTask" Content="{Binding}" IsChecked="{Binding ElementName=all, Path=IsChecked, Mode=OneWay}"></CheckBox>
</DataTemplate>
</ComboBox.ItemTemplate>
<ComboBox.Style>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="ItemTemplate" Value="{StaticResource cmbIndex}"/>
</Style>
</ComboBox.Style>
</ComboBox>
1) Add a Bool type IsSelected property in your model. and bind that property to IsChecked property of Checkbox in Template.
2) Bind that property to ComboBoxItem's IsSelected in ItemContainerStyle.
you might want to come up with other solution to make Check All working(like converters).
this will work.