Develop Reference

WPF, Window resizing as TextBox resizes

So I posted this question but the suggested answers do not seem to work. So once again, re-posting it, much simpler version of the XAML. We usually expect the TextBox to resize as the Window resize. I want the "other-way-around" behavior. TextBox that takes the whole Window area. The TextBox grows/shrinks in size, the Window follows. Please suggest on ways doing it.
<Window>
<Grid HorizontalAlignment="Stretch">
<TextBox Width="Auto">
</TextBox>
</Grid>
</Window>

<Window x:Class="MiscSamples.SizeToContent"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="SizeToContent" SizeToContent="WidthAndHeight" ResizeMode="NoResize">
<Grid HorizontalAlignment="Stretch">
<TextBox Width="Auto" AcceptsReturn="True">
</TextBox>
</Grid>
</Window>
Notice that you have to include ResizeMode="NoResize", because if the user resizes the window manually, the behavior is lost.

You could give the textbox a name and then bind the window width to the size of the textbox as such:
<Window Width="{Binding ElementName=txtbox, Path=ActualWidth}">
<Grid HorizontalAlignment="Stretch">
<TextBox x:Name="txtbox" Width="Auto">
</TextBox>
</Grid>
</Window>
I've not included any code for sizing the textbox (I assume you're going to do that programmatically or so) but with this XAML the window should size to the textbox width.

Cannot click or select Control XAML design

I develop on VS2010 WPF on Window 7. I have a project that does not throw any error or warning, compile fine, XAML design shows fine except I cannot click or select anyone controls in the XAML design view.
What is the reason, or how can I find out the problem or possible exception?

Had the same problem, I was able to select controls in the VS2012 WPF project previously but something had changed.
Worked out it was a TabItem in a TabControl, I had set the visibility to collapsed
<TabItem Visibility="Collapsed">
to hide the tab header at the top. Setting the TabItem visibility back to visible
<TabItem Visibility="Visible">
allows controls contained in the TabItem to be selected in the XAML design view.

I have reproduced this behavior by putting an empty grid as the last child element of my "main" Grid. In VS2010's designer, I cannot select any of the Buttons. Could this be your issue?
<Window x:Class="WpfApplication1.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">
<Grid>
<Button Content="Button" Height="52" HorizontalAlignment="Left" Margin="93,74,0,0" Name="button1" VerticalAlignment="Top" Width="113" />
<Button Content="Button" Height="38" HorizontalAlignment="Left" Margin="280,100,0,0" Name="button2" VerticalAlignment="Top" Width="96" />
<Grid></Grid> <!-- THIS IS THE PROBLEM!!! -->
</Grid>
</Window>

Had this recently, building the project seemed to fix the problem.

Do you have a Pointer in your toolbox? Sometimes the Pointer item inside the toolbox is gone. So the next item (Border) is selected. So when you try to click, you are actually trying to add a border to the design. You might try resetting the toolbox. But be warned, custom tools are gone then, and have to be added again. (I could not make a comment to this question, so thats the reason I 'answered')

Keeping controls in the visible area

I've got a grid with several TextBoxes in it. I want to keep this grid fixed at the bottom of my main window. So if the user scrolls down the grid should basically stay in it's place.
One way I thought of doing this was to get some sort of value from the ScrollViewer and add it to the grids Canvas.TopProperty. However I am not sure which value changes when the user scrolls up or down.

Then don't put the scroll on the main window. Put ScrollViewer only on the content (rows) that you want to scroll. Careful not to use an auto for the height of the rows with the ScrollViewer or the container will grow to support all the content and the Scroll does not come into play.

One way:
<Window x:Class="Sample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<ListBox>
<!--Hardcoded listbox items just to force the scrollbar for demonstration purposes -->
<ListBoxItem>Item1</ListBoxItem>
<ListBoxItem>Item2</ListBoxItem>
<ListBoxItem>Item3</ListBoxItem>
<ListBoxItem>Item4</ListBoxItem>
<ListBoxItem>Item5</ListBoxItem>
<ListBoxItem>Item6</ListBoxItem>
<ListBoxItem>Item7</ListBoxItem>
<ListBoxItem>Item8</ListBoxItem>
<ListBoxItem>Item9</ListBoxItem>
<ListBoxItem>Item10</ListBoxItem>
<ListBoxItem>Item11</ListBoxItem>
<ListBoxItem>Item12</ListBoxItem>
<ListBoxItem>Item14</ListBoxItem>
<ListBoxItem>Item15</ListBoxItem>
<ListBoxItem>Item16</ListBoxItem>
<ListBoxItem>Item17</ListBoxItem>
<ListBoxItem>Item18</ListBoxItem>
<ListBoxItem>Item19</ListBoxItem>
<ListBoxItem>Item20</ListBoxItem>
<ListBoxItem>Item21</ListBoxItem>
<ListBoxItem>Item22</ListBoxItem>
</ListBox>
<Grid Panel.ZIndex="5" VerticalAlignment="Bottom" Background="DarkGray">
<StackPanel>
<TextBox HorizontalAlignment="Left" VerticalAlignment="Center">Text box 1</TextBox>
<TextBox HorizontalAlignment="Left" VerticalAlignment="Center">Text box 2</TextBox>
<TextBox HorizontalAlignment="Left" VerticalAlignment="Center">Text box 3</TextBox>
</StackPanel>
</Grid>
</Grid>

Layout two controls on a line in a stretchable WPF window

Here's a fairly common UI pattern: Text box that contains a path to the left, and a Browse button to the right of it. If the window resizes, the button stays to the right, but the text box stretches to reveal more/less of the path. So in the good old days of anchors, the button would be anchored to the right and the text box would be anchored both left and right.
Trying to replicate this in WPF seems to be worryingly difficult.
If I create a new window, it comes with a Grid layout by default. I place my text box to the left and size it appropriately, then place the button to its right. HorizontalAlignment for the text box is Stretch and for the button it is Right.
In my mind, this works as described, but in real life the text box doesn't resize at all, but instead tries to center itself in the window, while the button acts as expected. What gives?
Here is my XAML:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="241" d:DesignWidth="414" SizeToContent="WidthAndHeight">
<Grid>
<TextBox Height="23" HorizontalAlignment="Stretch" Name="textBox1" VerticalAlignment="Top" Margin="12,11,101,0" />
<Button Content="Button" Height="23" HorizontalAlignment="Right" Margin="0,11,12,0" Name="button1" VerticalAlignment="Top" Width="75" />
</Grid>
</Window>

You would create another GridControl with two columns, one with a fixed width for Browse button and another one for the TextBox.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="75" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" />
<Button Grid.Column="1" />
</Grid>

You can use a DockPanel and set LastChildFill property to true to ensure that the textbox uses all the available space:
<DockPanel LastChildFill="true">
<Button DockPanel.Dock="Right">Browse</Button>
<TextBox>Content</TextBox>
</DockPanel>

How do I make a WPF popup draggable using a thumb?

I've searched long and hard to find an example of this on the net. I've seen the alternative methods for this but I want to specifically use a thumb. In trying to hash out a solution I've been unable to get the functionality right/working as I'm fairly new to WPF. I'd be grateful if someone could give an example of how you may implement the above.
Cheers

A Popup doesn't give you an obvious way to move it; you can only place it relative to its placement target. However it does give you and additional offset relative to the placement target and that's enough to move it anywhere.
Here's a working markup-only solution that demonstrates a draggable Popup using a Thumb using Markup Programming. There is a text box that has a popup that pops up when the text box receives the keyboard focus. The popup has some text and a thumb.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:p="http://markupprogramming.codeplex.com/markup/programming"
Height="300" Width="300">
<Grid>
<StackPanel>
<TextBox x:Name="textBox1" Width="200" Height="20"/>
</StackPanel>
<Popup Name="popup" PlacementTarget="{Binding ElementName=textBox1}"
IsOpen="{Binding IsKeyboardFocused, ElementName=textBox1, Mode=OneWay}">
<StackPanel Orientation="Horizontal">
<TextBlock Background="White" Text="Sample Popup content."/>
<Thumb Name="thumb" Width="20" Height="20"/>
</StackPanel>
<p:Attached.Operations>
<p:ScriptHandler Path="#FindElement('thumb').DragDelta">
#AssociatedObject.HorizontalOffset += #EventArgs.HorizontalChange;
#AssociatedObject.VerticalOffset += #EventArgs.VerticalChange;
</p:ScriptHandler>
</p:Attached.Operations>
</Popup>
</Grid>
</Window>