Develop Reference

Resizable WPF listbox inside Stack Panel?

I'm trying to create a listBox inside a WPF control which (1) has a minimum height of 80 and (2) which the user can resize to larger vertical height, if desired to see more of the list items. I also want the control, when nested inside a vertical stackPanel, to expand in height as the user expands the list. I've been playing around with gridSplitter. My XAML is below:
<UserControl x:Class="MyControl.FieldControl_SelectFrom"
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:MyControl"
mc:Ignorable="d"
d:DesignWidth="342">
<Grid Background="{x:Static SystemColors.ControlBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" x:Name="textBlock_fieldName" HorizontalAlignment="Left" Margin="20,4,0,0" TextWrapping="Wrap" Text="FieldName" VerticalAlignment="Top" FontWeight="Bold"/>
<ListBox Grid.Row="1" x:Name="selectorBox" MinHeight="80" Height="auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Padding="0,0,0,0" Margin="20,4,38,4" VerticalContentAlignment="Center" />
<GridSplitter Grid.Row="2" Height="2" VerticalAlignment="Center"></GridSplitter>
<TextBlock Grid.Row="3" x:Name="textBlock_fieldInfo" HorizontalAlignment="Left" Margin="20,0,0,6" TextWrapping="Wrap" VerticalAlignment="Bottom" FontStyle="Italic" Foreground="Gray">Field Info</TextBlock>
</Grid>
</UserControl>
When I run the project, the listbox is expanded to show the entire contents - with no ability to resize.
What am I missing?

The default resize direction of the GridSplitter is GridResizeDirection.Auto. If you look at the documentation for GridResizeDirection.Auto about the rules that govern behavior of Auto, you'll notice that in your case the GridSplitter -- based on the defined rules as explained in the documentation -- is actually attempting to resize between columns, not rows as you want it to be.
You can make the GridSplitter work in row mode in basically two ways. One is to set the ResizeDirection of the GridSplitter explicitly to GridResizeDirection.Rows. This, however, would not fully solve the problem with the code given in your question.
Because, without specifying the width of the splitter or letting it stretch horizontally (neither of which you have done), the splitter remains a point-like or short vertical line-like element with a width of zero that's practically impossible to hit. So, basically you could tell the splitter to stretch horizontally, which will let the default Auto resize direction operate in Rows mode (and therefore does not require to set the ResizeDirection property explicitly) as well as give the splitter a size that can actually be hit/grabbed with the mouse pointer.

UWP AutoCompleteBox in ContentDialog not sizing correctly - text area larger than drawn

I have an AutoCompleteTextBox in UWP is exhibiting a really odd behavior, and I can't figure out what's causing it. The TextBox is in a Grid, but the user can type past the bounds of the TextBox, so the first and last characters of each line are hidden behind the surrounding border. I've taken some screenshots to hopefully make this make more sense, as it's difficult to describe.
I've tried everything I can think of, but can't seem to get it to stop doing this. The only effect I had at all was in changing the HorizontalAlignment of the TextBox. Originally it was Stretch, and only the right side of the TextBox had cutoff letters. When I changed it to Center, it divided the cut-off section between both the left and right.
Does anybody have any ideas as to what's going on?
In the 1st picture, the actual TextBox area is defined by the box on the far outer edges of the ContentDialog [with the drag handles left of the (116)].
TextBox in VS Designer
In the second picture, the letters typed in the TextBox are 2 W's. If you look closely, you can just see the very right of the 1st W to the left of the full W there.
TextBox during execution
XAML:
<ContentDialog
x:Class="FlipPanelTest2.ComposeTweet"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FlipPanelTest2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
RequestedTheme="Dark"
Title="{Binding SendTo}"
Foreground="Gray"
Width="600"
PrimaryButtonText="Cancel"
SecondaryButtonText="Tweet!"
SecondaryButtonStyle="{StaticResource TweetContentDialogButtonStyle}"
PrimaryButtonStyle="{StaticResource CancelButtonStyle}"
PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
SecondaryButtonClick="ContentDialog_SecondaryButtonClick">
<Grid Width="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBox x:Name="tweetText" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Stretch" Background="White" TextWrapping="Wrap" Margin="2" TextChanged="TextBox_TextChanged" MaxHeight="180" MinHeight="112" Width="540" />
<StackPanel x:Name="characterCount" Orientation="Horizontal" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center">
<TextBlock x:Name="currentChars" HorizontalAlignment="Right" Grid.Row="1" FontSize="10" Text="{Binding TweetCharacters}" />
<TextBlock x:Name="charsDivider" HorizontalAlignment="Right" Grid.Row="1" FontSize="10" Text="/" />
<TextBlock x:Name="maxChars" HorizontalAlignment="Right" Grid.Row="1" FontSize="10" Text="{Binding MaxCharacters}" />
</StackPanel>
</Grid>

Well some more searching found the answer apparently. I hadn't thought to search for a max size on the ContentDialog, hence the reason I didn't find this before. Providing a link to the answer though for future people to use:
Quoted from ContentDialog max width:
In your App.xaml, try setting the ContentDialogMaxWidth to say, 800.
The default is 548. You might want to increase the height too.
<Application.Resources>
<x:Double x:Key="ContentDialogMaxWidth">800</x:Double>
<x:Double x:Key="ContentDialogMaxHeight">756</x:Double>
</Application.Resources>
ContentDialog max width
It's the last answer listed there, for some reason not the accepted answer. :)

How to make a certain section scrollable

I have got the following XAML:
<StackPanel HorizontalAlignment="Center">
<Image Name="logo" Source="logo.png" Margin="0,0,0,50"/>
<ScrollViewer>
<Dashboard_Control:AlignableWrapPanel x:Name="wrapPanel"/>
</ScrollViewer>
<TextBlock FontWeight="Bold" HorizontalAlignment="Center" x:Name="txtBottomText"></TextBlock>
</StackPanel>
I would like that the wrapPanel is scrollable only, so that the txtBottomText control will always be at the bottom as you scroll, and the logo image control will always be at the top - essentially only allowing the wrapPanel to be scrollable.
I have tried adding a ScrollViewer as shown above, however it never shows. I even tried adding a property to always have the vertical scrollbar, however it appears without letting me scroll (the scrollbar is disabled).
I suspect that this is because my wrapPanel's content is dynamically generated at run-time like so:
wrapPanel.Children.Add(content);
Any ideas what I can do to fix this?

It's not because of your wrapPanel's content. but because you're using a StackPanel to contain everything.
StackPanels grow indefinitely in the direction determined by their Orientation property. By default, that's vertically.
In your case, that makes the ScrollViewer "think" it has enough available space to stretch itself to accomodate its content, instead of activating the scroll bars. So it simply gets bigger as the WrapPanel inside gets bigger, pushing the TextBlock down.
To avoid this, you need to use a different Panel that is able to properly assign the available space to each control. Like a Grid.
<Grid HorizontalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Name="logo" Source="logo.png" Margin="0,0,0,50"/>
<ScrollViewer Grid.Row="1">
<Dashboard_Control:AlignableWrapPanel x:Name="wrapPanel"/>
</ScrollViewer>
<TextBlock Grid.Row="2" FontWeight="Bold" HorizontalAlignment="Center" x:Name="txtBottomText"></TextBlock>
</Grid>
I usually say that StackPanels tend to be overused :P They're practical and easy to use, but they have a bunch of quirks and limitations that make them not suitable for many situations, like this one.
EDIT: Make sure, also, that the Grid is not contained inside another vertical StackPanel, a Grid row with Height set to Auto, or something like that.

If the Height of your WrapPanel exceeds the height of the control or window where you have put the controls, the Textblock below the Wrap Panel inside the Stack Panel is put after the Wrap panel and so it is below the scroll area.
To be able to leave the Textblock always visible you have two means:
1) limit the height of your Wrap panel
2) Use a container like a Grid with 3 rows instead of the stack panel and put the Row Heights of the Grid respectively to
Auto, *, Auto so that the image on top and the textblock on bottom use the space of their content and the Scroll panel uses all the space remaining
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.Row ="0" Source="myimage.jpg" />
<ScrollViewer Grid.Row="1">
<WrapPanel Height="1200" Width="600">
<TextBlock>Ciao sono io</TextBlock>
</WrapPanel>
</ScrollViewer>
<TextBox Grid.Row="2" TextWrapping="Wrap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Text="IO c'ero" />
</Grid>

You have to set a fixed heigh to your scrollviewer - if not, the scrollviewer takes as much space as he needs, in order to show the complete content of its children.
Solutions:
Set the Height property of your scollviewer
Use a grid instead of a stackpanel an set the first and third rowheight to auto

WPF controls do not align

NOTE: This is one of the first time I'm using WPF.
I am trying to align a certain control, let's say a button for now, in the bottom right corner. But when I debug my application, it misses 8 pixels to the bottom and right. I will attach 2 pictures to show you what happens.
How do I keep the button in place?
My XAML code:
<Window x:Class="Plugin_Manager.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Plugin Manager" Height="350" Width="525" Loaded="Window_Loaded_1">
<Grid x:Name="GridMain">
<Button Content="Refresh" Margin="432,288,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="75"/>
<ListView HorizontalAlignment="Left" Height="273" Margin="10,10,0,0" VerticalAlignment="Top" Width="497">
<ListView.View>
<GridView>
<GridViewColumn/>
</GridView>
</ListView.View>
</ListView>
</Grid>

If you choose to use Grid layout you should try to avoid placing objects via Margin. Margin should be used to create buffer around an object, not move it to a specific point in the window. Use the layout manager's power to your advantage!
Here is a Grid example that does what you are looking for.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListView Grid.Row="0" />
<Button Grid.Row="1" HorizontalAlignment="Right" Content="Push Me" />
</Grid>
I would also read up on Layout Manager in WPF. There are several; each having its own advantages & disadvantages.
Here is a DockPanel version.
<DockPanel>
<Button DockPanel.Dock="Bottom" HorizontalAlignment="Right" Content="Push Me" />
<ListView />
</DockPanel>
To create your buffer between the button and the window chrome you could do a few different things:
<Grid Margin="10"> will apply a 10 pixel space between all content and the window chrome on all side.
<Grid Margin="0,0,10,10"> would indent all content, but only on the right & bottom.
<Grid Margin="10,0,10,10"> indents all around, except the top (I commonly do this one, with a different margin value).
<Button Margin="0,0,10,10"> would indent only the button from the chrome (this is the direct answer to your comment question).
Replace the Grid above with DockPanel for the second example, or whatever other Layout Manager you are using.
A usability side note: Your confirmation buttons (I'm assuming your button will be an Ok/Cancel type button) should not be indented differently from the rest of your content. All controls that butt up against the right margin should do so at the same point (i.e., you can draw a vertical line down the right side of them all).
So, using your question's example: your button should not be indented 10 pixels to the right while your list box is not. Keeping things lined up will improve the overall look to your application.
(this ends my "usability and look-and-feel is important" side note) :)

<Button VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="5"/>

Some code example will help. Try using the alignment in xaml for your button as shown below. Ensure that the margins on the button are 0.
<Button Margin="0" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
Looking at the sample code, it is your margins and the alignment you have that are probably causing that.
Just some pointers that may help. Instead of using large margins to align the controls, I find it much easier to work with Column and Row definitions on the grid. This way you can align your controls using the grid and they will size properly as you resize your window. I attached an example in hopes it helps in your new adventures with WPF!
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="Version Date" Margin="3" VerticalAlignment="Center"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding DateSubmitted}" Margin="3"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="Report" Margin="3" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding ReportName}" Margin="3"/>
</Grid>

create the same effect on a text as the title of windows

I create a transparency window with different textblock but my text isn't always readable because it's depends of colors user's window.
So I want apply the same effect on a text like the effect of my title window,
It's like a white shadow.
Thank you

The best way to do this would be to use a shader effect. I tried to do this with the built in Blur effect but it seems they don't blend with Alpha.
Below is an example of how I would start and doesn't represent an end product. HLSL border effect based off of Emboss effect.
View the full image for a better understanding. This effect only adds like 2 px border so the scaling makes it look even worse.
I'm pretty bad at writing HLSL the code on the right is just copy-pasted from http://brooknovak.wordpress.com/2008/09/16/simple-image-filters-written-as-hlsl-pixel-shaders/ with modification.
I'm sure someone who knew HLSL / GLSL could write a blur effect that works correctly. Note that this effect works across a full image and thus needs to know the image size. You should put them in a constant buffer and use them instead of the hardcoded 500.0 for width and height. They need to be the width/height of the rendered object. In my example it is actually the entire left half side of the window not just the size of the text because my XAML looks like this...
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525"
Loaded="Window_Loaded" Background="Transparent">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="264*" />
<ColumnDefinition Width="239*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="218*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="The quick brown fox jumped over the lazy dog." Foreground="White" Background="Transparent" Grid.RowSpan="3" x:Name="PART_TextBlock"/>
<TextBox x:Name="PART_TextBox" Grid.Column="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible" AcceptsReturn="True" AcceptsTab="True" />
<TextBlock x:Name="PART_Error" Grid.Column="1" Grid.Row="1"/>
<Button Content="Compile & Apply" Grid.Column="1" Grid.Row="2" Padding="4,1" Margin="4" HorizontalAlignment="Center" Click="Button_Click" />
</Grid>
</Window>