We Keep Coding

WPF ScrollView and TextBlock

What am I doing wrong?
The following code works:
<ScrollViewer x:Name="scrollChatMessages">
<TextBlock x:Name="txtChatMessages" TextWrapping="Wrap"/>
</ScrollViewer>
But once I touch it up with the designer so it looks neater and doesn't take over the entire Grid, the ScrollView doesn't scroll the content of the Scrollblock anymore:
<ScrollViewer x:Name="scrollChatMessages" HorizontalAlignment="Left" Height="181" Margin="95,10,0,0" VerticalAlignment="Top" Width="300">
<TextBlock x:Name="txtChatMessages" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Height="181" Width="300"/>
</ScrollViewer>
Could someone explain this behaviour to me?
Thanks in advance!

Without a good Minimal, Complete, and Verifiable code example it's impossible to say for sure. But you can see that the Designer has added a bunch of new property values for both elements. In particular, the ScrollViewer and TextBlock have been set to have the same exact width and height.
Naturally, with the contained element having exactly the correct dimensions to fit within the ScrollViewer, there's no need to scroll to see all of it. You need to remove the Width and Height property values from the TextBlock.

I solved it by placing it inside of a Grid.
<Grid x:Name="gridChatMessages" HorizontalAlignment="Left" Height="181" Margin="95,10,0,0" VerticalAlignment="Top" Width="300">
<ScrollViewer x:Name="scrollChatMessages">
<TextBlock x:Name="txtChatMessages" TextWrapping="Wrap"/>
</ScrollViewer>
</Grid>

Centering a mediaelement according to the aspect ratio

So, I've got this mediaelement, which I want to appear in the middle of the screen, 20 pixels away from each edge, and when it's width gets to 600, it stops expanding and stays where it is. I've got the following XAML to get exactly what I want:
<Grid x:Name="video">
<MediaElement x:Name="player" AreTransportControlsEnabled="True" Margin="20,0" MaxWidth="600" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
The only problem is that the VerticalAlignment property seems to always be set to "Stretch". How can I fix this? I've tried using a viewbox, which works flawlessly, except I then get overly large or small TransportControls. I've also tried putting the mediaelement inside another grid with centered alignments, but I still get the same problem.

What you want is
20 pixels away from each edge.
But in your code you defined Margin="20,0", if you read the FrameworkElement.Margin property, you will find the useage <frameworkElement Margin="left+right,top+bottom"/>. With your code, this usage makes your MediaElement stretch in the vertical orientation.
If you use the Live Visual Tree to get a real-time view of your running XAML code, you will find, when you use the code Margin="20,0", the MediaElement is like this:
And if you use the code Margin="20", the MediaElement is like this:
The dashed red border in each picture stands for the MediaElement control.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Pivot Margin="0,0,0,0" Background="LightGray">
<PivotItem Header="Formulas">
<Grid>
<GridView HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" Background="#FF983636">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<x:String>One</x:String>
<x:String>Two</x:String>
<x:String>Three</x:String>
<x:String>Four</x:String>
</GridView>
</Grid>
</PivotItem>
</Pivot>
</Grid>
The key here is HorizontalAlignment="Stretch" on the GridView.
The HorizontalAlignment="Center" on the VariableSizedWrapGrid inside the ItemsPanelTemplate inside the Gridview; should do the trick which will always keep the content centered regardless of the width of the screen.

In the end, I found how to fix this, by keeping a constant aspect ratio of 16/9:
XAML:
<Grid SizeChanged="player_SizeChanged" Background="Black" HorizontalAlignment="Center" VerticalAlignment="Center" MinWidth="1" MinHeight="1" Margin="30" MaxWidth="1000" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<MediaElement x:Name="player" Margin="0">
</Grid>
C#:
private void player_SizeChanged(object sender, SizeChangedEventArgs e)
{
(sender as Grid).Height = (e.NewSize.Width * 0.5625);
}

ScrollViewer not showing C#

I am new to C# and not fully understand ScrollViewer. Please see the code below and tell me why no Scroll bar becomes visible when below mentiond groupbox gets displayed on screen.
Any help would be highly appreciated.
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="5">
<GroupBox Name="grpDetail" Margin="5" Height="Auto" Grid.Row="5" ScrollViewer.VerticalScrollBarVisibility="Visible">
<my2:ucDisbursmentDetail Grid.Row="5" x:Name="ucDisbursmentDetail" Visibility="Collapsed"></my2:ucDisbursmentDetail>
</GroupBox>
</ScrollViewer>

Your ScrollViewer is simply bigger than it's content therefore it doesn't need to show the scrollbar. Just add some height to it
<ScrollViewer Height="300">
...
</ScrollViewer>

Button with image not overlaying another image

I have an image that is the stretched to be the size of the window (width and height wise).
I have a button that sits on top with the following XAML:
<Image Source="sample.png"></Image>
<Button Height="50" Width="100" Content="OverLay Image" Foreground="AliceBlue"
Background="Transparent" HorizontalAlignment="Left"
VerticalAlignment="Top"/>
This shows the button fine when I run, however, I'd like the button to have an image instead of text using this template:
<Button Height="50" Width="100" Content="OverLay Image"
Foreground="AliceBlue" Background="Transparent"
HorizontalAlignment="Left" VerticalAlignment="Top">
<Button.Template>
<ControlTemplate>
<Border>
<Image Source="img/sample.png"
Width="32"
Height="32"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
When I add the template section:
<Button.Template>
<ControlTemplate>
<Border>
<Image Source="img/sample.png"
Width="32"
Height="32"/>
</Border>
</ControlTemplate>
</Button.Template>
The button disappears. Has anyone seen this before or know how to force the button to show?
Thanks in advance!

It could be nothing, but I noticed that in your first (working) example of the Image, you used this path to your image:
<Image Source="sample.png"></Image>
But the one that you say doesn't work is using this path:
<Image Source="img/sample.png"/>
Maybe that was just an error you made copying it here, but otherwise, try this in your ControlTemplate:
<Image Source="sample.png"/>

Since you've changed the ControlTemplate it will only show your image. Everything looks fine, are you sure that the image path is correct? Try setting the background of the border to make sure that there isn't anything wrong with your template. Use Snoop to get look at the VisualTree and look at the source of the image.

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 >