We Keep Coding

WPF - Effects of "Center" vertical alignment on negative margins

Attempting to animate a control by modifying its margins, I realized that I might not fully understand the effects of the different alignment options on negative margins. To better explain my question, I created an example containing two TextBlock controls each surrounded by a Border.
As shown below, I attempt to give the first TextBlock _TextBlock1 (blue) - which has a vertical alignment of Top - a top margin of -20 so that its bottom edge will sit immediately on top of its border _Border1. This produces the desired result. I then attempt to achieve the same effect on TextBlock _TextBlock2 (orange), which is identical to _TextBlock1 except for its vertical alignment of Center. Since this TextBlock is centered vertically, I apply a top margin of -40, which from my understanding should produce the same result (20 pixels to move its top edge to the top edge of the border _Border2 and another 20 pixels to bring it fully above the border).
As shown on the image below - taken from the designer view in Visual Studio - I seem to be missing something about how the margins affect the placement of these controls given their vertical alignment type. Could somebody explain to me how I should be interpreting the interaction between margins and alignment types (as related to this example)? Also, how can I modify the margins on _TextBlock2 to produce the same results as _TextBlock1?
<Window x:Class="Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Test"
Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="60"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border
x:Name="_Border1"
Grid.Row="1"
Grid.Column="1"
BorderBrush="Black"
BorderThickness="1">
<TextBlock
Margin="0 -20 0 0"
x:Name="_TextBlock1"
Background="DodgerBlue"
VerticalAlignment="Top"
Height="20"/>
</Border>
<Border
x:Name="_Border2"
Grid.Row="1"
Grid.Column="2"
BorderBrush="Black"
BorderThickness="1">
<TextBlock
Margin="0 -40 0 0"
x:Name="_TextBlock2"
Background="Orange"
VerticalAlignment="Center"
Height="20"/>
</Border>
</Grid>
</Window>

Margins do not ‘move’ an element. Margins effectively grow or shrink the size of an element’s layout rectangle, which is provided by its parent. Alignment controls how an element positions itself within its layout rectangle.
Initially, the orange block has its parent’s entire area available for positioning, so its layout rectangle starts with a height of 60. Normally, adding (positive) margins shrinks the portion of the layout rectangle available to position an element. But a top margin of -40 effectively grows the orange block’s layout rectangle so it has a height of 60 - (-40) = 100. Let’s define the top-left corner of our effective layout rectangle as being (0, 0). Relative to this, the parent border’s top-left corner is (0, 40).
The orange block has a height of 20, and it has 100 units of vertical space in which to center itself. (100 - 20) / 2 = 40, so the block gets 40 units of vertical space above it and below it. This puts the orange block’s top-left corner at (0, 40), right along with its parent.

You can modify your _TextBlock2 as below to obtain required behaviour:
<TextBlock
Margin="0 -80 0 0"
x:Name="_TextBlock2"
Background="Orange"
VerticalAlignment="Center"
Height="20"/>
To have a better understanding regarding margins and padding go here.

Image disappears if not directly centered in window [Margin not "0"]

I've got a bit of a problem with my images in a WPF Vb.net based window.
If the image control is not directly in the centre of the window with a margin of 0, it will not show at runtime.
Here is the XAML code for both images:
<Image x:Name="loaderlogo" Height="55" Margin="1825,985,40,40" Width="55" Stretch="Fill"/>
<Image x:Name="tips" Height="128" Margin="0,732,0,220" Width="1920" Stretch="Fill" Opacity="0.9"/>
Both are contained inside a grid with one row and one column (the default grid that is there when you create a new window).
These images will not appear if this code is run however if i make the margins
Margin="0"
They will appear just fine, but in the very center of the control
How can i make it so that the controls still appear if the margins are not zero (if i move the images' location anywhere but the center of the form?
The code i use to fetch the image files is:
UseLayoutRounding = True
Dim exepath As String = System.AppDomain.CurrentDomain.BaseDirectory
loaderlogo.Source = New BitmapImage(New Uri(exepath & "loaderlogo.png", UriKind.Absolute))
tips.Source = New BitmapImage(New Uri(exepath & "tips.png", UriKind.Absolute))
The images work perfectly fine if dead center so I believe the problem is with the XAML but I am not sure where. I have changed the horizontal/vertical alignment but the images still appear in the center as long as the margin is 0.
EDIT: Below are the positions where I would like the controls to be, the bottom left is the 'loaderlogo' and the band across the window is the 'tips' control.
tips band position
loaderlogo position
EDIT 2: Below is the entire XAML code for the window:
<Window x:Class="loadingwindow" UseLayoutRounding="True"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:applicationname"
mc:Ignorable="d"
Title="loadingwindow" Height="1080" Width="1920" AllowsTransparency="True" WindowStyle="None" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowState="Maximized" Loaded="Window_Loaded">
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="00:00:01" Storyboard.TargetProperty="Opacity" From="0" To="1" Completed="DoubleAnimation_Completed"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
<Grid>
<Image x:Name="loaderlogo" Height="55" Margin="1825,985,40,40" Width="55" Stretch="Fill"/>
<Image x:Name="tips" Height="128" Margin="0,732,0,220" Width="1920" Stretch="Fill" Opacity="0.9"/>
</Grid>

Large margins are the worst way to position elements. The better approach is to use correct layout panel and correct alignments for elements. Small margin is fine to add some space between elements.
Grid panel is usually used with many RowDefinitions and ColumnDefinitions. Elements are placed in different rows and columns, and resulting layout is adaptive to size changes
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image x:Name="tips" Grid.Row="1" Height="128" Width="1920" Stretch="Fill" Opacity="0.9"/>
<Image x:Name="loaderlogo" Grid.Row="2" Height="55" Width="55" Margin="10"
HorizontalAlignment="Right" Stretch="Fill"/>
</Grid>

Windows Store App GridView Horizontal Scrolling

I'm trying to do news app for windows store with c# and xaml..
In this project, I created a Panorama GridView like windows phone 8.. And inside of this Panorama GridView, I created small gridviews for cathegories..
Structure is like this in Document Online;
-<Grid> (whole page)
-<Grid> (Header/Logo etc.)
-<PanoramaGridView> (All cath will be under of this)
-<HotNewsGridView>
-<HotNewsGrid>
-<GroupHeaderTextBlock>
-<HotGridView>
-<SportNewsGridView>
-<PoliticsGridView>
-<GalleryGridView>
And first side of code..
<GridView x:Name="PanoramaGridView"
Grid.Row="1"
Style="{StaticResource GridViewStyle1}"
ItemContainerStyle="{StaticResource GridViewItemStyle2}">
<GridViewItem Margin="0,0,2,0" VerticalAlignment="Top">
<Grid Margin="30,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition/>
</Grid.RowDefinitions>
<GridView x:Name="HotNewsGrid"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource MansetItemTemplate}"
Grid.Row="1"
SelectionChanged="HotNewsGrid_SelectionChanged"/>
<TextBlock x:Name="GroupHeaderTextBlock"
HorizontalAlignment="Left"
Margin="0,0,-7,-18"
Grid.RowSpan="1"
TextWrapping="Wrap"
Text="Hot News"
Foreground="DarkGreen"
VerticalAlignment="Top"
Style="{StaticResource SubheaderTextStyle}"/>
</Grid>
The problem is, I cannot scroll when my mouse cursor come on the "HotNewsGrid" grid. I can only scroll from top and bottom of the application..
I think, my PanoramaGridView is okay with scrolling but when my cursor comes subgridviews (like hot news gridview) it stops scrolling, cannot scroll from it. I tried to put IsSwipeEnable, ScrollViewer.HorizontalScrollMode="Enabled" etc.. Did not worked..
I do not want scrolling the "HotNewsGrid". I just want to continue scrolling when my cursor comes on it..
I hope you understand me.. This is a very big problem for me..
Waiting your helps..
Thank you..

Add this Template to your GridView
<GridView.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</GridView.Template>
and you will be able to scroll using a mouse.
Note that a side effect of this is that you can no longer swipe select on your GridView

Scrollable canvas containing imges in windows phone 8

I am working on a windows phone 8 app. I have a canvas containing images which I can drag to change their position in canvas. My problem is that canvas is not scrollable, I want a vertical scrollbar in page. I tried like this
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer x:Name="scvImages" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="0"
HorizontalContentAlignment="Stretch" Height="Auto" Width="Auto">
<Grid Height="Auto" Width="Auto">
<Canvas x:Name="canImages" Height="Auto" Width="Auto">
</Canvas>
</Grid>
</ScrollViewer>
</Grid>

At first glance it looks like there's nothing telling the ScrollViewer to invoke since your Grid and Canvas are just going to fill the ViewPort so you might consider setting a fixed Height or something on your Grid

You must specify the height of your panel (canvas, grid, whatewer) which you want to scroll. Otherwise it will render out of the screen but 'thinks' that it is ok and scrolling is no needed (since it is infinite height).

Modified Data Binding

I'm creating a transition effect that will slide 2 panels (side to side).
My plan is to have a Grid that has the width of the window multiplied by 2 through data-binding, divide it by 2 to have the 2 panels, then put Grids in them (so I'll have 2 panels equally divided with their own grid and you can see only one of them at a time. all it takes now is to move the root grid with an animation to create the transition effect).
So I'm trying to data bind the Grid's width to the width of the window multiplied by 2 (as I've written in bold above), but I have no idea how you can modify a data bind, and let it keep updating accordingly. so if possible - how do you do it?
I guess I could do it with events (just like in any other .NET application) but that's just more opportunities for bugs to come and fester (i.e. events I'll miss); so I'd really appreciate a good and clean solution.
By the way, if you have a better way to make the transition, please let me know in the comments. My mind is still open to ideas.
Thanks!

I've done it. It was like this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="0" />
<Grid x:Name="Panel1" />
<Grid x:Name="Panel2"/>
</Grid>
Now, this is side-scrolling, however the point is same. All you do is apply RenderTransform.TranslateTransform animation to Panel2, you animate X from 0 to Panel2 Width, essentially it will be completely off, and after that you just set Panel2 Column to "1".
I can give you tomorrow little code example too, but you can get started.
Here is the Xaml that takes care of slide2slide animation when user toggles the button.
<Grid.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="workingPlanButton">
<BeginStoryboard>
<Storyboard Completed="Storyboard_Completed">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:0.1"
Duration="0:0:00.5"
Storyboard.TargetName="lsView"
Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)"
Timeline.DesiredFrameRate="30">
<LinearDoubleKeyFrame KeyTime="00:00:00.3" Value="{Binding ElementName=bodyGrid, Path=ActualHeight}" />
</DoubleAnimationUsingKeyFrames>
<!-- Hide the panel -->
<ObjectAnimationUsingKeyFrames BeginTime="0:0:0.5"
Storyboard.TargetName="lsView"
Storyboard.TargetProperty="Visibility"
Timeline.DesiredFrameRate="30">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Hidden}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
Now the actual grid:
<Grid x:Name="bodyGrid" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<StudyPlan:StudyPlanControl />
<local:LessonControl x:Name="lsView />
<local:LessonControl.RenderTransform>
<TranslateTransform Y="0" />
</local:LessonControl.RenderTransform>
</local:LessonControl>
</Grid>