We Keep Coding

WPF how to get control and TextBlock to align in center in stretched grid

I have the following scenario:
<Grid x:Uid="Grid_3" Grid.Row="0" Margin="5" Focusable="False" Visibility="Visible" Background="DarkGray" Opacity="0.4" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition x:Uid="RowDefinition_8" Height="Auto"/>
<RowDefinition x:Uid="RowDefinition_9" Height="Auto"/>
</Grid.RowDefinitions>
<controls:LoadingPanel Grid.Row="0" IsLoading="True"
HorizontalLoadingIndicatorAlignment="Center"
VerticalLoadingIndicatorAlignment="Center"
/>
<TextBlock x:Uid="TextBlock_4" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Commit In Process..." />
</Grid>
</Grid>
I want the LoadingPanel and the TextBlock to be aligned in the center of the Grid which I have set to be stretched vertically and horizontally.
Note that the grid is already inside another grid. At the moment both places themselves at the top.

So, I'm guessing the issue you're seeing is that the controls are not centred vertically but instead sit at the top of the grid?
To resolve this (while keeping the controls below one another) simply add a relative sized row above and below the two rows for the controls like so:
<Grid x:Uid="Grid_3" Grid.Row="0" Margin="5" Focusable="False" Visibility="Visible" Background="DarkGray" Opacity="0.4" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"/>
<RowDefinition x:Uid="RowDefinition_8" Height="Auto"/>
<RowDefinition x:Uid="RowDefinition_9" Height="Auto"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<controls:LoadingPanel Grid.Row="1" IsLoading="True"
HorizontalLoadingIndicatorAlignment="Center"
VerticalLoadingIndicatorAlignment="Center"
/>
<TextBlock x:Uid="TextBlock_4" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Commit In Process..." />
</Grid>
This should sort out the issue.

Just to be able to give an answer to this topic, I am reposting the comment from above, to allow #DSF to accept it.
Apparently the issue was related to the fact that the grid had two rows, and each control was on it`s own row. Discarding the rows solved his issue.
To fix the order of visibility, as you want, use Panel.ZIndex="2" on the LoadingPanel and Panel.ZIndex="1" on the TextBlock, like this

WPF Expander - Horizontal Alignment set to Right, but jumps to left on when expanded

I've got a WPF Expander that is right aligned. That bit shows correctly on the screen, but when you expand it the expander and the text "show/hide historic data" jumps to the left of the screen. Close the expander and it returns to the correct (right) alignment.
I've tried various approaches but am unable to find why this is happening or more importantly how to keep an expanded expander right aligned
<Grid Grid.Row="1"
HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" >
<TextBlock Style="{StaticResource SubHeader}" Text="Historic Data Sets" />
<Rectangle Style="{StaticResource HeaderLine}"/>
</StackPanel>
<Expander Header="show/hide historic data"
Grid.Column="1"
IsEnabled="True"
VerticalAlignment="Center"
HorizontalAlignment="Right"
ExpandDirection="Down">
<!-- some other stuff in the second row such as grid... -->
</Expander>

YOu can take control of the Header by explictly marking it as a TextBlock and then change itś HorizontalAlignment property:
<Expander.Header>
<TextBlock
Width="200"
HorizontalAlignment="Right"
Text="Show information.."></TextBlock>
</Expander.Header>

Stretch Slider to fit Grid/GridViewItem/GridView [C#, XAML]

I really need your help now. I´ve tried a few thousands solutions, but nothing worked for me. This is a part of a page built with Microsoft Visual Studio 2013 for Windows. I want to make to make the Slider (named slider_1) responsive, so it should fill the rest of the page regardless the Screen Solution (cannot use fixed Heights):
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid Grid.Row="0">
.........
</Grid>
<Grid Grid.Row="1" Name="secGrid">
<GridView x:Name="source">
<GridViewItem x:Name="item_1">
<Grid x:Name="container_1">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" x:Name="name_1" Height="39" Text="123"></TextBlock>
<Button Grid.Row="1" x:Name="toggle_on_1" Content="ON"></Button>
<Slider Grid.Row="2" x:Name="slider_1" Orientation="Vertical" VerticalAlignment="center" HorizontalAlignment="center"/>
<Button Grid.Row="3" x:Name="toggle_off_1" Height="39" Content="OFF"></Button>
</Grid>
</GridViewItem>
</GridView>
</Grid>
Thought I could get it to work by binding the Height of the Slider to the ActualHeight of the "secGrid", but this is not suitable for my purpose, even if it seemed to work well in combination with a converter:
<Slider Grid.Row="2" x:Name="slider_1" Orientation="Vertical" VerticalAlignment="center" HorizontalAlignment="center" Height="{Binding ActualHeight, ElementName=secGrid}"/>
Tried to set VerticalAligment/VerticalContentAligment to "Stretch", but it did not work.
Its important that it is responsive to other Screen Solutions.
Can anybody help me? Do I have to use another type of Element besides the inner Grid named container_1? This is driving me crazy....
PS: Sorry for mistakes in language. I´m german :)

Your Auto sizing grid creates problem for slider scaling as Auto means "size to row content", and * means "size proportional to grid".
Auto means that a row is given as much height as the elements within it require.
The height of * sized row is calculated by allocating space for the auto, and fixed height rows, and then dividing up the remaining space.
below code works fine if I set height to rowdefination 2 or if I set height to grid
<Grid>
<GridView x:Name="source">
<GridViewItem x:Name="item_1" >
<Grid x:Name="container_1">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="100"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" x:Name="name_1" Height="39" Text="123"></TextBlock>
<Button Grid.Row="1" x:Name="toggle_on_1" Content="ON"></Button>
<Slider Grid.Row="2" x:Name="slider_1" Orientation="Vertical" HorizontalAlignment="center"/>
<Button Grid.Row="3" x:Name="toggle_off_1" Height="39" Content="OFF"></Button>
</Grid>
</GridViewItem>
</GridView>
</Grid>

C# Change backgroundcolor specific row

I've created a new project from the Grid App (XAML) template (C# Windows Store).
So far I've changed nothing in the template, but I would like to change the backgroundcolor from a specific row in the grid.
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
I would like to change the backgroundcolor from row 0 (which contains the page title).
Any ideas?? Thanks in advance!
This row consits of:
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>

You can't set the background color on the Grid.Row itself, instead set the Background property on whatever occupies this row.
For example
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="Red" Grid.Row="0">
<TextBlock>Test</TextBlock>
</Grid>
</Grid>
EDIT:
Updated for Silverlight; TextBlock doesn't have Background so you have to put the control in another Border or grid container which does have background. Code updated to reflect this.

How about inserting border where you need it
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Background="Red" Grid.ColumnSpan="1"></Border>
<TextBlock>Test</TextBlock>
<Border Background="blue" Grid.Row="1" Grid.ColumnSpan="1"></Border>
<TextBlock Grid.Row="1">Test2</TextBlock>
</Grid>
note that you can especify the columns span in case of include more columns

Keep slider in usercontrol from scaling in WPF

I have a user control which contains a media element to play a video, a slider used as a trackbar for the video and a text block that display the title of the video. These 3 controls are placed in a grid which in turn is placed inside a border.
I want the user to be able to translate, rotate and scale this control. The problem is that when the control scales it's content scales also and i want the slider control not to scale. Is it possible to somehow keep the slider control from scaling?
I should also mention that the manipulation of the control is handled by setting the control ismanipulationenabled to true and using the manipulation delta event.
EDIT:
This is how the xaml for the control looks like:
<Grid Name="movieGrid" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border x:Name="moviePlayerBorder" Background="Black" BorderBrush="Blue" BorderThickness="2,2,2,2" CornerRadius="5,5,5,5" Grid.RowSpan="2">
<Grid Name="contentGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<WinControls:MediaElement x:Name="movieDisplay" ScrubbingEnabled="True" IsEnabled="True" Grid.RowSpan="2"
LoadedBehavior="Manual" UnloadedBehavior="Manual"
MediaOpened="movieDisplay_MediaOpened">
</WinControls:MediaElement>
<Image x:Name="btnPlay" Grid.Row="1" Height="60" Width="60" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="120,44,112,43" Grid.RowSpan="2">
</Image>
<DockPanel LastChildFill="True" HorizontalAlignment="Stretch" Margin="6,2,6,0" Grid.Row="0">
<TextBlock Text="test" Margin="0,0,0,0" Name="txtBlockTitlu" HorizontalAlignment="Stretch"
FontSize="14" VerticalAlignment="Top" Foreground="White" TextWrapping="Wrap" Visibility="Collapsed"/>
</DockPanel>
</Grid>
</Border>
<Slider x:Name="seekBar" VerticalAlignment="Bottom" HorizontalAlignment="Center" Width="299"
Thumb.DragStarted="seekBar_DragStarted" Thumb.DragCompleted="seekBar_DragCompleted" Thumb.DragDelta="seekBar_DragDelta" MaxHeight="33"
Minimum="0" Maximum="286" Height="33" Margin="0,0,0,0" Grid.Row="1"/>
</Grid>

if you want to build a fully scaleable user control you should define the layout only with the size values of a row column / row row eg. auto, x* or fixed values (if realy needed).
do not use fixed size values on elements.