I have held of asking here in hopes to find an answer by searching first but I have been unsuccessful.
I have what is a search filter bar on the left side of my window, looks something like this (I have omitted most of the controls for size sake and because most of them are ComboBox and experiencing the same issue):
<Grid Grid.Column="0" Background="#FF1E2125">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<ScrollViewer x:Name="scroll_filter" Grid.Row="0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<StackPanel Grid.Row="0" Orientation="Vertical" Margin="0,0,0,10">
<TextBlock Grid.Row="0" Text="User" Foreground="White" VerticalAlignment="Center" FontSize="12" Margin="10,3,10,3"/>
<ComboBox x:Name="cbo_search_user" Grid.Row="1" Margin="10,3,10,3" SelectedIndex="0" IsTextSearchEnabled="True" TextSearch.TextPath="ID">
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid Height="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding ID}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Text="{Binding Full_Name}" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<!-- Other controls omitted for clarity -->
</StackPanel>
</ScrollViewer>
<Button x:Name="btn_search" Grid.Row="1" Content="Search" Margin="10,3,10,10" VerticalAlignment="Bottom" Height="28" Foreground="White" Style="{StaticResource ButtonWithoutHover}" Background="#FF41B1E1" Click="btn_search_Click"/>
</Grid>
My ComboBoxes are being populated via ItemsSource from code behind and can contain multiple results so that the ComboBox gets its own ScrollViewer.
The ScrollViewer is there so that the controls are visible to the user if the window is resized.
The ScrollViewer scrolls fine with the mouse wheel (dragging the bars too) which is great, the problem however is that when I dropdown on a ComboBox with many items in I cannot scroll with the mouse wheel.
The ScrollViewer (if small enough and scrollable) seems to take over and scrolls the whole lot up and down instead of the items in the expanded ComboBox.
If the scrollbar isn't visible on the ScrollViewer, scrolling with the mouse wheel doesn't do anything and the only way to scroll in the ComboBox is by dragging it's scrollbar.
How can I make the ComboBox within the ScrollViewer scrollable with the mouse wheel so that users aren't forced to drag the scroll bars.
Thanks
This answer suggests using the FrameworkTemplate.FindName method like this
ScrollViewer sv = comboBox.Template.FindName("DropDownScrollViewer", comboBox) as ScrollViewer;
if (sv != null)
{
// Do something...
}
Related
I have created a UserControl that is suppose to display some text and then present a listbox for the user to select some item.
It is supposed to strech to the height to the grid cell it is placed in. And if there are more items than can fit on screen then to display a vertical scrollbar. After much trial and error I have finally managed to get it working as expected. But only when the row height is a pixel value. If I use any partial (by partial I mean the star symbol), the grid cell's height is not contained. Since I need the app the match screen size I need the partials to work.
Putting 100 items in the listbox suddenly makes the height of the entire grid is around 11000 (which I think is everything with no contraint). Meaning there is no scrollbar. See [Screenshot] https://i.stack.imgur.com/faES9.png.
I have a similar issue with my TextBox only horizontally. It will only activate when clicking on a specific pixel since it is empty the width is only 1 pixel. I hope someone can help me point out where I am going wrong, cause since I'm having more than one issue I suspect the problem is on my end.
This is my XAML code.
<UserControl x:Class="PackingStation.UserControls.SearchItemListing"
x:Name="SearchItemListingRoot"
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:local="clr-namespace:PackingStation.UserControls"
mc:Ignorable="d"
d:DesignHeight="1000" d:DesignWidth="1000">
<Grid DataContext="{Binding ElementName=SearchItemListingRoot}"
x:Name="TheGrid"
VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=".1*" />
<RowDefinition Height=".1*" />
<!-- If this value isnt a pixel value it will not vertically strech to available space -->
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel HorizontalAlignment="Center"
Margin="0,0,0,0"
x:Name="TheHeadLineField"
Grid.Row="0"
Grid.Column="1">
<Label Style="{StaticResource LabelStyleHeadline32}"
Content="{Binding Title}"
HorizontalAlignment="Left"/>
<Label Style="{StaticResource LabelStyleText}"
HorizontalAlignment="Left"
Content="{Binding SubTitle}"
FontSize="20"/>
</StackPanel>
<!-- Search Field -->
<Border Style="{StaticResource Border6}"
x:Name="TheSearchField"
Grid.Row="1"
Grid.Column="1"
Background="{StaticResource ColorSummaryPanelBackground}"
BorderBrush="{StaticResource ColorSummaryPanelBorder}"
BorderThickness="1"
Margin="0,40,0,0">
<StackPanel Orientation="Horizontal"
Height="78"
HorizontalAlignment="Stretch">
<Image Stretch="Uniform"
Height="24"
Source="pack://application:,,,/WpfUI;component/Icons/Search.png"
Margin="36,0,0,0"
VerticalAlignment="Center"/>
<!-- Search Textbox -->
<!-- Similar issue with this textbox, only horizontally. With no content you have to hit a specific pixel to activate it -->
<TextBox Style="{StaticResource TextBoxSearchInlay}"
Name="TbxSearchTerm"
TextChanged="TextBoxBase_OnTextChanged"
HorizontalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
Margin="20,0,0,0"/>
</StackPanel>
</Border>
<!-- Search results listings -->
<ListBox ItemsSource="{Binding Items}"
x:Name="TheListBox"
Grid.Row="2"
Grid.Column="1"
SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
ScrollViewer.VerticalScrollBarVisibility="Auto"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch" Margin="0,-10,0,-10">
<Label Style="{StaticResource LabelSearchItem}"
Content="{Binding Name}"
HorizontalContentAlignment="Stretch"
HorizontalAlignment="Stretch"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>
I could repro your problem when I put your UserControl in a StackPanel. When it's in a Grid the ListBox shows its vertical scrollbar. So, try your UserControl in a Grid.
I think this answer will give a good explanation about Grid and StackPanel stretching behavior.
I have a WPF form with some text fields and two ListBoxes:
<TextBlock>Label</TextBlock>
<TextBox Text="{Binding Input}"/>
<TextBlock>List Label</TextBlock>
<ListBox ItemsSource="{Binding Items1}"/>
<TextBlock>Second List Label</TextBlock>
<ListBox ItemsSource="{Binding Items2}"/>
I'd like for the two ListBoxes to expand vertically to fit their container, but for each one to stop expanding once its scrollbar is no longer necessary. The closest I've come is with a grid:
<Grid VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" MinHeight="40" />
<RowDefinition Height="auto" />
<RowDefinition Height="*" MinHeight="40" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<TextBlock>Label</TextBlock>
<TextBox Text="{Binding Input}"/>
<TextBlock>List Label</TextBlock>
</StackPanel>
<ListBox Grid.Row="1" ItemsSource="{Binding Items1}"/>
<TextBlock Grid.Row="2">Second List Label</TextBlock>
<ListBox Grid.Row="3" ItemsSource="{Binding Items2}"/>
</Grid>
However, then the space taken up by the list boxes is always the same due to the asterisk row height, so if one list stops growing, the remainder of the height to match the other list is left as empty space at the bottom of the grid.
What you want is a DockPanel...
<DockPanel >
<TextBlock DockPanel.Dock="Top">Label</TextBlock>
<TextBox Text="{Binding Input}" DockPanel.Dock="Top"/>
<TextBlock DockPanel.Dock="Top">List Label</TextBlock>
<ListBox Grid.Row="1" ItemsSource="{Binding Items1}" DockPanel.Dock="Top" MinHeight="40" MaxHeight="200"/>
<TextBlock Grid.Row="2" DockPanel.Dock="Top">Second List Label</TextBlock>
<ListBox Grid.Row="1" ItemsSource="{Binding Items2}" MinHeight="40"/>
</DockPanel>
This fulfills all of your requirement. The container is completely filled. The listboxes stop expanding when scrollbars are no longer needed. However if there are too many items in the 1st listbox the 2nd one will disappear completely. This is why I put in a max height for the first list box.
I have a Grid which has a TextBox inside a ScrollViewer:
<Grid DockPanel.Dock="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ScrollViewer>
<StackPanel Height="271" Width="258">
<Label FontSize="15" Margin="10"> Suggestions </Label>
<Expander x:Name="expander" Margin="10" />
</StackPanel>
</ScrollViewer>
<GridSplitter Grid.Column="0" Width="5" />
<ScrollViewer Grid.Column="1">
<TextBox x:Name="textBox" AcceptsReturn="True"
AcceptsTab="True" FontSize="15"
VerticalScrollBarVisibility="Visible"
HorizontalScrollBarVisibility="Visible"
TextWrapping="WrapWithOverflow" Language="en-US"
SpellCheck.IsEnabled="True"/>
</ScrollViewer>
</Grid>
Even if I set HorizontalScrollBarVisibility to Visible, the horizontal scroll bar is not visible, and when I type some text that goes beyond the TextBox's width, I can't scroll:
Looking at the implementation of the TextBox: http://referencesource.microsoft.com/#PresentationFramework/src/Framework/System/Windows/Controls/TextBox.cs#1473
it seems that this is the normal behavior: the horizontal scrollbar is not visible when TextWrapping is WrapWithOverflow.
Based on that, the only possible way to show the horizontal scrollbar of the TextBox is to set the TextWrapping to NoWrap.
A workarount to what (I think that) you want to achieve with the outer ScrollViewer might be:
<ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Visible">
<TextBox x:Name="textBox" AcceptsReturn="True"
AcceptsTab="True" FontSize="15"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Hidden"
TextWrapping="WrapWithOverflow" Language="en-US"
SpellCheck.IsEnabled="True"/>
</ScrollViewer>
It appears to me that the TextBox element is not being entirely displayed. I'd bet that the scroll bar is there, you just cannot see it without re-sizing your current window or scrolling downwards in the main window.
I cant figure out what I am doing wrong I have a grid with 2 columns and 3 rows. In the left column I have a textblock and textbox and a listbox which is all good.
The right column gets a little more complicated where I have a tabcontrol to start. Then my TabItem and inside that I have my Main Grid and then inside that I have 2 grids. Which are grdDetailsTop and then grdDetailsBottom.
grdDetailsTop has 3 columns where the left will be an image with a Border the middle should be Member Code: 'TextBox' and under that should be Family Code: 'TextBox' and then finally under that I would like to place Balance: 'TextBox'
The way I tried it was, I have grdDetailsTop Grid with 3 columns in the first column I placed a groupbox and inside that I have a stackpanel.
Second Column is where I am having trouble I placed a Stackpanel with the orientation Horizontal and grid.Column="1" but my textblocks are going into the 3rd column without me telling them too. Sorry for the bad explanation but the code is posted hopefully you can help. Also the reason for my different Panels is so I can place a border around each column of the grdDetailsTop.
Thanks
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"></ColumnDefinition>
<ColumnDefinition Width="70*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="5*"></RowDefinition>
<RowDefinition Height="100*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="Search Member" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20"></TextBlock>
<TextBlock Text="Member Details" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20"></TextBlock>
<TextBox Name="txtMEMSearch" Background="Orange" Grid.Column="0" Grid.Row="1"></TextBox>
<ListBox Name="lstSearchMembers" Grid.Row="2"
BorderBrush="Black" DisplayMemberPath="Name"
ItemsSource="{Binding ElementName=bindingToObject,
Path=Clients}" />
<TabControl Name="mainTabControl" Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Margin="5">
<TabItem Header="Member Details" Name="memDetailTab">
<Grid Name="mainTabGrid">
<Grid Name="grdDetailsTop" Height="175" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<GroupBox Header="Picture">
<StackPanel>
<Image Height="125" Width="125"></Image>
</StackPanel>
</GroupBox>
*************PROBLEM AREA******************
<StackPanel Margin="5" MaxWidth="200" Orientation="Horizontal" Grid.Column="1">
<TextBlock
VerticalAlignment="Top"
Margin="5"
Height="25">Member Code:</TextBlock>
<TextBlock
VerticalAlignment="Top"
Margin="5"
Width="75"
Height="25"></TextBlock>
<TextBlock
Margin="5"
Height="25"
Width="100">Family Code:</TextBlock>
<TextBlock
Margin="5"
Width="75"
Height="25"></TextBlock>
<TextBlock
VerticalAlignment="Bottom"
Margin="5"
Height="25"
Width="100">Balance Due:</TextBlock>
<TextBlock
Margin="5"
VerticalAlignment="Bottom"
Width="75"
Height="25"></TextBlock>
</StackPanel>
******************************************
</Grid>
<Grid Name="grdDetailsBottom">
</Grid>
</Grid>
</TabItem>
</TabControl>
</Grid>
</Page>
You're missing the VerticalAlignment = "Top" on that TextBlock, and therefore, it is defaulting to Stretch which will center the text in the available vertical space. If you set that property, you'll see that it moves back up to be in line with the other TextBoxes in the same StackPanel.
It isn't actually moving that TextBox into the next column, rather, you've defined a fixed width of the column it is in (in this case, column 1 with a width of 200). But the contents of that column (the StackPanel are more than 200 units wide, so they push over into the next grid column. To keep all the TextBoxes in column 1, you'll either need to widen the column so they can fit, shrink the size of the TextBoxes or set the width Auto so it will automatically size itself to its contents. If you look at it, you're taking up 175 units with TextBlocks 2 and 3, leaving only 25 units for the rest of the TextBlocks in that StackPanel. There's just not enough space.
<StackPanel Margin="5" MaxWidth="200" Orientation="Horizontal" Grid.Column="1">
<TextBlock VerticalAlignment="Top" Margin="5" Height="25">Member Code:</TextBlock>
<TextBlock VerticalAlignment="Top" Margin="5" Width="75" Height="25"></TextBlock>
<TextBlock VerticalAlignment="Top" Margin="5" Height="25" Width="100">Family Code:</TextBlock>
... other text boxes ...
</StackPanel>
This will fix the vertical layout issue, but not the Horizontal layout issue. That requires changes to the grid column sizing or the size of the contents.
Per your comment below, I believe you're looking for the WrapPanel which will automatically wrap items to the next line (horizontal or vertical) when it runs out of space.
<WrapPanel Margin="5" MaxWidth="200" Orientation="Horizontal" Grid.Column="1">
<TextBlock VerticalAlignment="Top" Margin="5" Height="25">Member Code:</TextBlock>
<TextBlock VerticalAlignment="Top" Margin="5" Width="75" Height="25"></TextBlock>
<TextBlock VerticalAlignment="Top" Margin="5" Height="25" Width="100">Family Code:</TextBlock>
... other text boxes ...
</WrapPanel>
This layout certainly looks nicer. But - I don't know your specific requirements, however rather than using a WrapPanel with fixed margins and sizes, I would recommend using a Grid with ColumnDefinitions and RowDefinitions to organize items in this type of layout. The Grid offers a much greater level of flexibility and allows for items to automatically resize based on system font sizes, a user resizing your view and other factors out of your control. If you are setting fixed heights/widths, you lose that flexibility. Again, I don't know you're requirements, so perhaps this is the best solution for you, but under most circumstances, I'd highly recommend a Grid instead.
I am trying to get my data to display properly within a GridLayout, which is to be used as a DataTemplate for an Item within ListBox. Here is the code associated with what I am doing:
<Grid Name="FeedItemTemplate">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Source="{Binding ProfileImage}" Grid.RowSpan="2" Height="75" Width="75" VerticalAlignment="Center" Margin="1" />
<TextBlock Text="{Binding UserName}" Grid.Column="1" Foreground="#FFC8AB14" FontSize="28" HorizontalAlignment="Left"/>
<TextBlock Text="{Binding TimeStamp}" Grid.Column="2" TextWrapping="Wrap" FontSize="18" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding Message}" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" TextWrapping="Wrap" FontSize="24" />
</Grid>
The issue is that using this layout, when TextWrapping is set to Wrap, the Item is displayed correctly, but when scrolling through the ListBox everything is really jittery, you cannot scroll in small increments, and it just jumps all over the place.
Any reason why it does this? As I said, only when TextWrapping is set to Wrap it does this. When its not used, it scrolls fine, but the text is all along one line and off the screen.
Does it keep jumping if you explicitly set the top-level Grid element's width to a fixed size?
For some reason that I do not fully understand, settings the ListBox's ItemsPanel property to a StackPanel might solve your problem:
<UserControl.Resources>
<ItemsPanelTemplate x:Key="MyItemsPanelTemplate">
<StackPanel/>
</ItemsPanelTemplate>
</UserControl.Resources>
...
<ListBox ... ItemsPanel="{StaticResource MyItemsPanelTemplate}"/>
This is a known issue with listbox scrolling in the current ctp when you have variable height items. The workaround for now is to set a fixed height on your listbox item content. You'll probably also notice the scroll bar doesnt properly go to the bottom all the time. The workaround fixes that too.
Reference.