We Keep Coding

How to Animate Visibility.Collapsed + Update StackPanel

I think my title is a bit confusing so let me explain my question in detail.
I have a StackPanel with multiple Grids inside it. It basicly looks like a table with a "Header Grid" and a "Content Grid" below. The StackPanel itself is inside a ScrollViewer.
Whenever the user clicks on the "Header Grid" the corresponding "Content Grid" should be collapsed and visible vice versa.
Here is a short version of my table:
<ScrollViewer Margin="0,0,0,10">
<StackPanel>
<Grid x:Name="Header_Grid1" Height="24" Background="#BF101820" VerticalAlignment="Top" Margin="34,0,0,0" Cursor="Hand" >
<Label Content="Click me to show/hide Content_Grid1" Padding="5,0" VerticalContentAlignment="Center" Margin="5,0,0,0" Grid.ColumnSpan="2" Width="982"/>
</Grid>
<Grid x:Name="Content_Grid1" Height="100" Width="967" HorizontalAlignment="Right" Margin="0,5,0,0" RenderTransformOrigin="0.5,0.5">
<Label Content="some content" Foreground="#FF918F82" Padding="5,0" VerticalContentAlignment="Center" Margin="0,0,719,75"/>
<Label Content="some content" Foreground="#FF918F82" Padding="5,0" VerticalContentAlignment="Center" Margin="0,25,719,50"/>
</Grid>
<Grid x:Name="Header_Grid2" Height="24" Background="#BF101820" Width="1001" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,0,0">
<Label Content="Click me to show/hide Content_Grid2" Padding="5,0" VerticalContentAlignment="Center" Margin="5,0,0,0" Grid.ColumnSpan="2" Width="982"/>
</Grid>
<Grid x:Name="Content_Grid2" Height="100" Width="967" HorizontalAlignment="Right" Margin="0,5,0,0" RenderTransformOrigin="0.5,0.5">
<Label Content="some content" Foreground="#FF918F82" Padding="5,0" VerticalContentAlignment="Center" Margin="0,0,719,75"/>
<Label Content="some content" Foreground="#FF918F82" Padding="5,0" VerticalContentAlignment="Center" Margin="0,25,719,50"/>
</Grid>
</StackPanel>
</ScrollViewer >
Lets say the user clicks on "Header_Grid1" the "Content_Grid1" hides with an kinda "flow to the top" animation by reducing its size. Thats no problem at all - the thing is I´d like the "Header_Grid2" aswell as the "Content_Grid2" to flow to the top while the animation of hiding "Content_Grid1" is playing. "Header_Grid2" and "Content_Grid2" should not just pop to the place where "Content_Grid1" has been. It should rather happen in a smooth animation.
Hopefully someone understands what I mean. It´s pretty hard to explain...
Thanks

As far as I am aware you can't animate the collapsed method, but there are various tricks to get around that such as animating the opacity, size, location etc...

WPF window - other controls not responding to clicks after adding Hyperlink control

I am new to WPF,and have written a simple hello world type application in order to get started. The code I have so far is shown below:
WPF XAXML
<Window x:Name="wndMain" x:Class="MyApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ews="clr-namespace:ExtraWindowStyles"
ResizeMode="NoResize"
ews:ExtraWindowStyles.CanMinimize="false"
ews:ExtraWindowStyles.CanMaximize="false"
Title="Hello World" Height="501.492" Width="842.285">
<Grid>
<GroupBox Header="Input Parameters" HorizontalAlignment="Left" Height="173" Margin="10,25,0,0" VerticalAlignment="Top" Width="801" >
<StackPanel Orientation="Horizontal" Margin="0,0,96,0">
<StackPanel Margin="10">
<Label FontWeight="Bold">First Group</Label>
<RadioButton x:Name="opt11">Option 1 - 1</RadioButton>
<RadioButton x:Name="opt12">Option 1 - 2</RadioButton>
<RadioButton x:Name="opt13">Option 1 - 3</RadioButton>
</StackPanel>
<StackPanel Margin="10">
<Label FontWeight="Bold" Content="Second Group"/>
<RadioButton x:Name="opt21" Content="Option 2 - 1"/>
<RadioButton x:Name="opt22" Content="Option 2 - 2"/>
<RadioButton x:Name="opt23" Content="Option 2 - 3"/>
</StackPanel>
</StackPanel>
</GroupBox>
<Separator HorizontalAlignment="Left" Height="80" Margin="17,203,0,0" VerticalAlignment="Top" Width="794"/>
<Button x:Name="btnSubmit" Content="Submit" HorizontalAlignment="Left" Height="34" Margin="632,203,0,0" VerticalAlignment="Top" Width="179" Click="btnExplore_Click" />
<Label Content="Results:" HorizontalAlignment="Left" Height="28" Margin="10,242,0,0" VerticalAlignment="Top" Width="161"/>
<Label Content="My App" HorizontalAlignment="Left" Height="23" Margin="696,439,0,0" VerticalAlignment="Top" Width="130" FontSize="9"/>
<TextBlock>
<Hyperlink NavigateUri="http://www.google.com" RequestNavigate="Hyperlink_RequestNavigate">
Click Here
</Hyperlink>
</TextBlock>
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="162" Margin="17,270,0,0" Stroke="Black" VerticalAlignment="Top" Width="794"/>
<Label x:Name="lblResult" Content="" HorizontalAlignment="Left" Height="157" Margin="17,275,0,0" VerticalAlignment="Top" Width="794"/>
</Grid>
</Window>
Code Behind..
private void Hyperlink_RequestNavigate(object sender, RequestNavigateEventArgs e)
{
Process.Start(new ProcessStartInfo(e.Uri.AbsoluteUri));
e.Handled = true;
}
If I comment out the Hyperlink control XAML (and its related backend code), I am able to select options, click the Submit button etc.
However, if I uncomment the Hyperlink control (and its associated backend code), The only thing that remains clickable, is the Url on the form - what's going on?

Just position your TextBlock and it won't take all space in the window and cover everything :
<TextBlock Width="100" Height="30">
<Hyperlink Background="Red" NavigateUri="http://www.google.com" >
Click Here
</Hyperlink>
</TextBlock>
Because the TextBlock is after submit button in XAML it is over.
You could also set Margin to position the TextBlock
Layout knowledge
Elements in a grid Stretch Horizontally and Vertically if no alignment is set.
Useful tip : If you click on the TextBlock tag, you'll see the extent of the TextBlock in the design view.
Often useful

Windows Phone 8.1 ScrollView: auto-height

I would like to ceate a text block inside a scroll view. I want the scroll view to be automatic on every device and every screen size. But for the moment, I am forced to fix an height, in pixels. Otherwise, the scroll view will adapt to the text size... Without doing its scrolling job.
How to do this properly?
Thanks!
EDIT: here is my XAML:
<Grid>
<StackPanel Orientation="Vertical" Margin="10,10,10,10">
<ProgressBar x:Name="progressBar" IsIndeterminate="True" IsEnabled="True" />
<TextBlock x:Name="titleBlock" Text="" VerticalAlignment="Top" FontSize="48"/>
<TextBlock x:Name="subtitleBlock" Text="" TextWrapping="Wrap" FontSize="24" FontStyle="Italic"/>
<TextBlock x:Name="dateBlock" TextWrapping="Wrap" Text="" FontSize="24"/>
<ScrollViewer VerticalAlignment="Top" Height="370" VerticalScrollBarVisibility="Visible" Margin="0,15,0,0" VerticalScrollMode="Enabled" AllowDrop="False" BringIntoViewOnFocusChange="True" HorizontalScrollMode="Disabled" IsHoldingEnabled="True" >
<Grid>
<TextBlock x:Name="descriptionBlock" TextWrapping="Wrap" Text="" FontSize="14.667"/>
</Grid>
</ScrollViewer>
<Button x:Name="buttonViewFlyer" Click="buttonViewFlyer_Click" Content="Voir le flyer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5,5,5,0"/>
<Button x:Name="buttonViewFacebookPage" Click="buttonViewFacebookPage_Click" Content="Page Facebook de l'évènement" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5,0,5,5"/>
</StackPanel>
</Grid>
I want the scrollview to have a height that adapts with device screen size.

WPF: How can I stretch the middle child in a DockPanel?

I added a DockPanel to a RadioButton element such that I can distribute the radio button label, a textbox and a button horizontally using 100% of the width.
Using LastChildFill="True"within the DockPanel stretches the last element. This works out nicely if the textbox is the last child in the panel. But, as the button is the last element and has a fixed width, the textbox should be stretched. However, there's no such property like 2ndChildFill="True".
My code looks like this:
<RadioButton HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch">
<DockPanel >
<TextBlock VerticalAlignment="Center">in location:</TextBlock>
<TextBox Grid.Column="1" Margin="10,0,0,0">Path string</TextBox>
<Button HorizontalAlignment="Right"
Margin="10,0,0,0" Padding="3,0">...</Button>
</DockPanel>
</RadioButton>
And it gives me this:
Any ideas, hints to fix this? Many thanks in advance...

You need to set DockPanel.Dock attached property for your elements and leave TextBox as the last element:
<RadioButton HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch">
<DockPanel LastChildFill="True">
<TextBlock DockPanel.Dock="Left"
VerticalAlignment="Center"
Text="in location:" />
<Button DockPanel.Dock="Right"
Margin="10,0,0,0"
Padding="3,0"
Content="..." />
<TextBox Margin="10,0,0,0">
Path string
</TextBox>
</DockPanel>
</RadioButton>

Accepted answer is fixing your problem but creates another one. If someone uses keyboard (TAB) to navigate through your interface, Button will be focused before TextBox. This could be very annoying on a long run. If you don't want to brake your tab orders use Grid instead of DockPanel:
<RadioButton HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" VerticalAlignment="Center">in location:</TextBlock>
<TextBox Grid.Column="1" Margin="10,0,0,0">Path string</TextBox>
<Button Grid.Column="2" HorizontalAlignment="Right" Margin="10,0,0,0" Padding="3,0">...</Button>
</Grid>
</RadioButton>
Alternative would be to control tab orders yourself using TabIndex attribute. This can be tricky though, especially when you display your control in a collection.
<RadioButton HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" TabIndex="0">
<DockPanel LastChildFill="True">
<TextBlock DockPanel.Dock="Left" VerticalAlignment="Center" Text="in location:" />
<Button DockPanel.Dock="Right" Margin="10,0,0,0" Padding="3,0" Content="..." TabIndex="2"/>
<TextBox Margin="10,0,0,0" TabIndex="1">Path string</TextBox>
</DockPanel>
</RadioButton>

Wpf UserControl Width and Height Not Taknig

I have a user control that is just a box with text like this:
<Border x:Name="box"
BorderThickness="0"
BorderBrush="Black"
Background="Black"
Width="200" Height="200">
<Label Content="Hello World"
Height="65" Width="400"
Foreground="White" FontSize="32"
HorizontalAlignment="Center" VerticalAlignment="Center"
HorizontalContentAlignment="Center" />
</Border>
When I create and instance of it in my MainWindow like this...
<local:MyBoxControl Width="1000" Height="1000"/>
the width and height is 200x200 as defined in the Border when I'd like it to be 1000x1000 as provided when I create it.

Just remove the Width and Height from the Border element.

Would it be acceptable for you to set the HorizontalAlignment and VerticalAlignment of the Border to Stretch?

Assuming you need the width/height of the border to remain at 200 (otherwise you just wouldn't specify it) you can make a grid the outermost element of the control and put the border inside it. Then if you don't define a width/height on that it will auto-adjust to the size of your control.
<Grid>
<Border x:Name="box"
BorderThickness="0"
BorderBrush="Black"
Background="Black"
Width="200" Height="200">
<Label Content="Hello World"
Height="65" Width="400"
Foreground="White" FontSize="32"
HorizontalAlignment="Center" VerticalAlignment="Center"
HorizontalContentAlignment="Center" />
</Border>
</Grid>