We Keep Coding

WPF Listbox stretching issues

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.

ComboBox inside ScrollViewer doesn't scroll its dropped down items using MouseWheel

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...
}

Windows Store App GridView Horizontal Scrolling

I'm trying to do news app for windows store with c# and xaml..
In this project, I created a Panorama GridView like windows phone 8.. And inside of this Panorama GridView, I created small gridviews for cathegories..
Structure is like this in Document Online;
-<Grid> (whole page)
-<Grid> (Header/Logo etc.)
-<PanoramaGridView> (All cath will be under of this)
-<HotNewsGridView>
-<HotNewsGrid>
-<GroupHeaderTextBlock>
-<HotGridView>
-<SportNewsGridView>
-<PoliticsGridView>
-<GalleryGridView>
And first side of code..
<GridView x:Name="PanoramaGridView"
Grid.Row="1"
Style="{StaticResource GridViewStyle1}"
ItemContainerStyle="{StaticResource GridViewItemStyle2}">
<GridViewItem Margin="0,0,2,0" VerticalAlignment="Top">
<Grid Margin="30,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition/>
</Grid.RowDefinitions>
<GridView x:Name="HotNewsGrid"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource MansetItemTemplate}"
Grid.Row="1"
SelectionChanged="HotNewsGrid_SelectionChanged"/>
<TextBlock x:Name="GroupHeaderTextBlock"
HorizontalAlignment="Left"
Margin="0,0,-7,-18"
Grid.RowSpan="1"
TextWrapping="Wrap"
Text="Hot News"
Foreground="DarkGreen"
VerticalAlignment="Top"
Style="{StaticResource SubheaderTextStyle}"/>
</Grid>
The problem is, I cannot scroll when my mouse cursor come on the "HotNewsGrid" grid. I can only scroll from top and bottom of the application..
I think, my PanoramaGridView is okay with scrolling but when my cursor comes subgridviews (like hot news gridview) it stops scrolling, cannot scroll from it. I tried to put IsSwipeEnable, ScrollViewer.HorizontalScrollMode="Enabled" etc.. Did not worked..
I do not want scrolling the "HotNewsGrid". I just want to continue scrolling when my cursor comes on it..
I hope you understand me.. This is a very big problem for me..
Waiting your helps..
Thank you..

Add this Template to your GridView
<GridView.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</GridView.Template>
and you will be able to scroll using a mouse.
Note that a side effect of this is that you can no longer swipe select on your GridView

Dividing WPF window

I want to divide my window (wpf) in three columns: left column must be DockPanel ( I think StackPanel will not work on Canvas), the right column should be another DockPanel holding a listbox and in the middle I need to have a Canvas.
This is what I have done and I am having problem with left column since it is not expandable. I need the left column as holder of custom object so that user could drag/drop them on canvas. Please advise.
<DockPanel LastChildFill="True" Background="LightGray" Margin="5">
<Expander Header="Controls" Background="Gray" Margin="2"
Content="{StaticResource FC}" DockPanel.Dock="Top"
IsExpanded="True" Width="200" />
</DockPanel>
<GridSplitter Focusable="False" Width="2" Background="LightGray"
VerticalAlignment="Stretch" HorizontalAlignment="Right"/>
<lib:MyCanvas x:Name="myCanvas" FlowDirection="LeftToRight"
Background="White" AllowDrop="True"
Mouse.MouseMove="MyCanvas _MouseMove">
</lib:MyCanvas >
Also, what control should be used on the right side so that can hold a listbox?

Looking at various question you have asked, it looks like you are looking at building an application similar to Visual studio. I would suggest you to look at following great series of articles on CodeProject similar to your requirement i.e. having ToolBox, various ToolBox items , a designer, drag & drop items on designer etc. -
WPF Diagram Designer - Part 4, Part 3, Part 2, Part 1
You will just have to add a PropertyGrid on the right side and bind your selected ToolBox item in designer with it.

You can embed another grid, or canvas, or other kind of container inside of a grid, you don't have to. But you have a GridSplitter so by definition it needs to be placed inside of a Grid in order to provide its functionality, otherwise it doesn't do anything.
It sounds like you want to do something like this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDeifnition Width="*" />
<ColumnDefinition Width="100" /> <!-- whatever size you need here --->
</Grid.ColumnDefinitions>
<DockPanel LastChildFill="True" Background="LightGray" Margin="5" Grid.Column="0">
<Expander Header="Controls" Background="Gray" Margin="2"
Content="{StaticResource FC}" DockPanel.Dock="Top"
IsExpanded="True" Width="200" />
</DockPanel>
<GridSplitter Focusable="False" Width="2" Background="LightGray" Grid.Column="1"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ResizeDirection="Columns"/>
<lib:MyCanvas x:Name="myCanvas" FlowDirection="LeftToRight" Grid.Column="2"
Background="White" AllowDrop="True"
Mouse.MouseMove="MyCanvas _MouseMove">
</lib:MyCanvas >
<ListBox Grid.Column="3" ... />
</Grid>
This layout gives you your 3 columns, the 2nd column is your splitter that lets you resize the first 2 columns (sliding back and forth between them), and your 3rd column is a fixed size.

Create a Grid with 3 columns. For the 1st and 3rd put a DockPanel as child.
I think the general rule is don't put others under canvas, not the other way round.

WPF Create a slide out panel

I don't know how this works technically but my requirement is as follows. I have a DataGrid and to input data into the DataGrid, I want a panel at the bottom of the DataGrid that slides out on a button click showing input options. Except, as the panel slides out, the DataGrid has to resize vertically as well. Can someone throw some light on how I can implement this?

You should be able to use a StackPanel with 2 children, your grid and your panel. Set the initial height of your panel to 0. Once the button is clicked, set the height to whatever you need it to be (e.g., MyPanel.Height = 20). You might want to wrap the grid in a ScrollViewer in case that is needed.
<StackPanel Orientation="Vertical">
<ScrollViewer Height="Auto" VerticalAlignment="Stretch">
<Grid Height="*" VerticalAlignment="Stretch" />
</ScrollViewer>
<ContentControl x:Name="MyPanel" Height="0" />
</StackPanel>
You might need to experiment with VerticalAlignment and Height="Auto" or Height="0" to get the layout you want.

You can use Expander. Please look at the following code snippet.
<DockPanel>
<Expander DockPanel.Dock="Bottom">
<StackPanel>
<TextBlock Height="25"></TextBlock>
<TextBlock Height="25"></TextBlock>
<TextBlock Height="25"></TextBlock>
</StackPanel>
</Expander>
<Border BorderBrush="LightGreen" BorderThickness="2">
<DataGrid/>
</Border>
</DockPanel >