I need to create Listbox in C#/WPF which contains the following
Something which is like a multi column list box,
One field for text, second field contains text which is to be chosen from a Combo Box.
I need to know the selection event so that I can validate the selection.
I am making a kind of mapping between two texts and the first field of text is not selectable, the second field to be selected from the combobox.
I need to put it in a box which is scrollable.
So my questions are
Is it possible to build such a thing using C#/WPF.
How do I trigger a window containing a listbox and capturing the selected item.
Lets Say
I have a signal A1, A2, A3
I need to map them to signal B1, B2, B3
So I want to show two rows of text
I want to get which signal got selected and then assign it to the correct row.
[edit]
Ok So I think it is possible to build one, I tried something with the following XAML code,
But I could not get the listbox to resize correctly and the data binding is still not Ok. Need to capture the Combobox selection too. :D
<Grid>
<ListBox Name="Mapping" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,5,0,0"
ItemsSource="{Binding Source=StaticResource CanMainPageViewModel.MappingInformation}"
>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=CanMainPageViewModel.MappingInformation.SigName}" Grid.Column="0" MinWidth="200" VerticalAlignment="Top" HorizontalAlignment="Stretch" FontSize="8"/>
<ComboBox Grid.Column="1" MinWidth="200" VerticalAlignment="Top" HorizontalAlignment="Stretch" FontSize="8"/>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
So my problem still remains,
[EDIT]
So playing around I found this can solve my problems now
<UserControl x:Class="Caribou_wpf.Controls.CanMostSignalMappingControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:controls="clr-namespace:Caribou_wpf.Controls"
xmlns:CanMainPageViewModel="clr-
namespace:Caribou_ViewModel.Data.CAN;assembly=Caribou_ViewModel"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<DataTemplate x:Key="MappingInfoTemplate">
</DataTemplate>
</UserControl.Resources>
<Grid>
<ListBox Name="Mapping" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="0,5,0,0"
ItemsSource="{Binding CanMainPageViewModel.MappingInformation.Signals}"
>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=CanSignal.SigName}"
Grid.Column="0" MinWidth="200" VerticalAlignment="Top"
HorizontalAlignment="Left" FontSize="10"/>
<ComboBox Grid.Column="1" MinWidth="200"
VerticalAlignment="Top" HorizontalAlignment="Right" FontSize="10"
ItemsSource="{Binding Path=MostPropertyParam}"
DisplayMemberPath="Name"
/>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>
I just need to make sure that all items are ReadOnlyCollection
But somehow the controls are always sticking to the left. Can anyone point out please , why it is so.
Now how do I capture which object index is triggering the selected item in the combobox?
Thanks a lot.
Here is how I did it
<ListBox Name="Mapping" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,5,0,0"
ItemsSource="{Binding CanMainPageViewModel.MappingInformation.Signals}"
BorderThickness="1"
>
<ListBox.ItemTemplate >
<DataTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=CanSignal.CompleteSignalName}" Grid.Column="0" MinWidth="280" FontSize="11" FontFamily="Calibri"
HorizontalAlignment="Stretch" TextAlignment="Right" Margin="5,2,3,2"/>
<ComboBox Grid.Column="1" MinWidth="280" FontSize="11" FontFamily="Calibri"
ItemsSource="{Binding Path=MostPropertyParameters}"
DisplayMemberPath="ParCompleteParamName" HorizontalContentAlignment="Stretch" Margin="3,2,5,2"
SelectedIndex="{Binding Path=SelectedMostPropertyParamIndex, Mode=TwoWay}"
/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Related
I am new into WPF and I have problem as I mentioned in title.
I'm using ListBox.
When I click into row in first column. I cannot select value.
It works when I click on border of row.
In second column I have no problems.
This is how looks ListBox and Grid. And now how it's look running.
XAML code below
<Grid Grid.ColumnSpan="2" Margin="24,45,375,124" Grid.RowSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ListBox x:Name="ProductListView" Height="200" VerticalAlignment="Top" SelectionChanged="ListBox_SelectionChanged" AutomationProperties.IsColumnHeader="True" RenderTransformOrigin="0.508,0.5" Grid.ColumnSpan="2" Margin="2,0,-19,0">
<ListBox.GroupStyle>
<GroupStyle/>
<!--
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock FontWeight="Bold" HorizontalAlignment="Center"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
-->
</ListBox.GroupStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="350" x:Name="Nazwa_Produktu" />
<ColumnDefinition Width="100" x:Name="Cena_w_zl" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding PricePerUnit, StringFormat=\{0\} zł}" Grid.Column="1" HorizontalAlignment="Right" />
<ScrollViewer VerticalScrollBarVisibility="Hidden"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
The hidden Scrollbar seems to be overlapping with your first column, making the items inside unselectable.
I tested with your provided code and removed:
<ScrollViewer VerticalScrollBarVisibility="Hidden" />
This solved the issue you have mentioned!
Is there a reason why the hidden scrollbar has to be there?
So I am having some trouble getting the binding of a lisbox height to work. I have a user control that holds a listbox, this box is dynamically populated on the fly but it seems that if too many items are added it extends past the boundaries of the parent objects and refuses to stop and use the scoll bar...
<UserControl x:Class="TransaltionModule.Views.NoteView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d">
<Grid>
<ListBox ItemsSource="{Binding noteList}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="5*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0">
<TextBlock Text="Type :" VerticalAlignment="Center" FontSize="14" Width="65"/>
<TextBox Text="{Binding noteType}" Width="auto" IsEnabled="False" VerticalAlignment="Center" FontSize="14"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
<TextBlock Text="Date :" VerticalAlignment="Center" FontSize="14" Width="65"/>
<TextBox Text="{Binding timeStamp}" Width="auto" IsEnabled="False" VerticalAlignment="Center" FontSize="14"/>
</StackPanel>
<TextBlock Grid.Row="1" Text="{Binding text}" Grid.ColumnSpan="2"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
If i hardcode the maxheight property everything works as intended, but with the multiple display resolutions I will be working against that is not a solution I can use. Can anyone recommend a fix
You can bind it to an element by using Path=ActualHeight
For this to work don't forget to name the Grid containing the Listbox
Try something like this :
<Grid x:Name = "grdListBoxTest">
<ListBox x:Name="lstBoxTest"
MaxHeight="{Binding ElementName=grdListBoxTest, Path=ActualHeight}">
<!-- Your Listbox Stuff Here -->
</ListBox>
</Grid>
By doing this you link the height of the Listbox to it's parent Grid. That way if the grid's size changes the MaxHeight of the Listbox will change.
I have a Windows Store App with a ListBox which contains Grids of variable height. I can't get these to align at the top. I've tried every combo of VerticalAlignment and VerticalContentAlignment I can think of, and they're always centered vertically.
Here's my XAML
<Page
x:Class="MyApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid Margin="50,50,50,50" HorizontalAlignment="Stretch" Width="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="80"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="" Margin="12,0,0,0" Style="{StaticResource HeaderTextStyle}" />
<Grid Grid.Row="1" Margin="30,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="15"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="15"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" x:Name="bxAddItem" Width="300" Height="28" Margin="0,0,0,0" Text="Item text" KeyUp="bxAddItem_KeyUp" GotFocus="bxAddItem_GotFocus" LostFocus="bxAddItem_LostFocus"></TextBox>
<ComboBox Grid.Column="2" x:Name="comboList" SelectionChanged="comboList_SelectionChanged" Width="100" Height="32">
<ComboBoxItem Tag="0">No List</ComboBoxItem>
</ComboBox>
<Button Grid.Column="4" x:Name="btnAddItem" Click="AddItem_Click" HorizontalAlignment="Left" Background="#45000000" Height="34">Add an Item</Button>
</Grid>
<ScrollViewer HorizontalScrollBarVisibility="Visible" Grid.Row="2">
<ListBox Width="Auto" VerticalContentAlignment="Top" ItemsSource="{Binding ToDoLists}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="Beige">
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}"></TextBlock>
<ListBox Grid.Row="1" Grid.Column="0" Name="ToDoList" ItemsSource="{Binding Path=Items}"
Margin="24,0,0,0" Height="Auto" MinWidth="200" VerticalAlignment="Stretch"
BorderBrush="BlueViolet" SelectionChanged="ToDoList_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding ItemName}"></TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel VerticalAlignment="Top" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
</ScrollViewer>
</Grid>
</Grid>
</Page>
EDIT:
Sheridan's answer does not work for me. There may be something else on the page that's causing the issue.
I've updated the question to include the entire page code.
EDIT 2:
This post was incorrectly tagged as WPF when in fact the issue is in a Windows Store app. This code works perfectly in WPF, hence the confusion. However it does NOT work in a Windows Store app
Have you tried setting the ItemContainerStyle to VerticalAlignment="Top"
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="VerticalAlignment" Value="Top"></Setter>
</Style>
</ListBox.ItemContainerStyle>
I want to make a ListBox that arranges items horizontally. Each item should be a TextBox, and it should fill the list box vertically regardless how how much text is there. If you've used Tweetdeck, I'm aiming for a similar effect. Here's what I've got:
<ListBox
Background ="DarkGray"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ItemsSource="{Binding Path=Items}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel IsItemsHost="True"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Gray" BorderThickness="2" CornerRadius="5" Margin="2,0,2,0">
<Grid Width="250">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBox
Grid.Row="0"
Grid.Column="0"
VerticalAlignment="Stretch"
Text="{Binding Path=Messages, Mode=OneWay}" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
What happens is that the TextBox stubbornly fits the text in it, rather than stretching vertically. I've tried switching the Grid for a DockPanel, which didn't help. I could bind the TextBox's Height property, but that seems unpleasant.
Is there a trick to this that I've missed?
You need to set VerticalContentAlignment="Stretch" on your ListBox.
When applying a itemsControl i found that logical scrolling (canContentScroll="true") no longer seems t be working.
With logical scrolling i mean viewing item per item when clicking for example 2 navigation buttons that moves the scrollviewer.
The content of the itemControl is as the following:
<Grid Height="70" Width="900">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftScrollRow2" Width="Auto"/>
<ColumnDefinition x:Name="HorizontalContentRow2" Width="*"/>
<ColumnDefinition x:Name="RightScrollRow2" Width="Auto"/>
</Grid.ColumnDefinitions>
<RepeatButton Content="left" x:Name="btnLeft" Grid.Column="0" Style="{DynamicResource RepeatButtonStyleLeft}" Click="btnLeft_Click"></RepeatButton>
<ScrollViewer Grid.Column="1" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" x:Name="sv" CanContentScroll="True" Margin="0" Height="73" >
<ListBox x:Name="list1" ItemsSource="{Binding Reg, ElementName=Window}" Background="{x:Null}" BorderBrush="{x:Null}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button x:Name="TestButton" HorizontalAlignment="Center" Height="71" Width="151"
Margin="5,0,10,0" Style="{DynamicResource ButtonStyleTest}"
Click="TestButton_Click"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListBox>
</ScrollViewer>
<RepeatButton Content="right" x:Name="btnRight" Grid.Column="2" Style="{DynamicResource RepeatButtonStyleRight}" Click="btnRight_Click"></RepeatButton>
</Grid>
When i navigate the items that are being loaded in the stackpanel (buttons) only continues scrolling appears, and content slowly appears.
A possible solution to this would be using HorizontalOffSet but this involving giving a exactly distance which i think would not be a good solution at all.
Thanks in advance,
Jackz
I would go about this differently.
I would add the scroll bar in the style. Read this and see the note in the Scrollbar section.
http://www.wpfsharp.com/2012/03/18/itemscontrol-vs-listbox-vs-listview-in-wpf/