We Keep Coding

WPF - Getting position of a control keeps returning {0;0}

I'm trying to get the positions of controls (buttons) but it keeps returning {0;0}. I'm sure there's an explanation for this, but I can't figure out why this happens.
I want the position of the control, relative to the window or a certain container. My buttons are arranged in another grid. Taking the margins of these buttons would just give 0,0 since they're all inside grid cells.
What I tried:
- var point = btnTest.TransformToAncestor(mainGrid).Transform(new Point());
- UIElement container = VisualTreeHelper.GetParent(btnTest) as UIElement;
Point relativeLocation = btnTest.TranslatePoint(new Point(0, 0), mainGrid);
I tried this with a grid as a parent and with a canvas. Everything I try gives me {0,0}. When I change the new Point parameters, the position does change. It stays the same as the parameters.
Small part of my XAML:
<Grid x:Name="mainGrid">
<Grid Name="buttonGrid" Margin="105,64,98.4,97.8">
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnTest" Grid.Row="0" Grid.Column="0" Content="Button" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="26" Height="29"/>
<Button x:Name="btnTest2" Grid.Row="1" Grid.Column="1" Content="Button" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="26" Height="29"/>
</Grid>
</Grid>

Your code works perfectly fine, it is the timing that is the issue. The UI elements must be drawn before the position can be retrieved.
The code sample below shows the point extraction running in the constructor with the result 0,0 and then running in the loaded event which returns the desired result 84,78.
<Window x:Class="WpfApp7.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="450" Width="800" Loaded="Window_Loaded">
<Grid x:Name="mainGrid">
<Button x:Name="btnTest" Content="TileButton" HorizontalAlignment="Left" Margin="84,78,0,0" VerticalAlignment="Top" Width="109" Height="103"/>
</Grid>
public MainWindow()
{
InitializeComponent();
GetPoint();
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
GetPoint();
}
private void GetPoint()
{
var point = btnTest.TransformToAncestor(mainGrid).Transform(new Point());
UIElement container = VisualTreeHelper.GetParent(btnTest) as UIElement;
Point relativeLocation = btnTest.TranslatePoint(new Point(0, 0), mainGrid);
MessageBox.Show($"X = {relativeLocation.X} Y = {relativeLocation.Y}");
}

Undesired button resizing after being transformed

I'm trying to create an expandable/collapsible menu for a personal project of mine. I have everything almost where I want it (in terms of it being behaving as expected anyway). When I collapse my menu, I want the buttons to rotate to a vertical position and not resize (Or at least resize to something that still fits the text). At the moment, the buttons rotate, then shrink vertically (what was/is the width) along with the parent control, which cuts off much of the contents. I can see why this would happen, but I can't think of a way around it that seems right to me.
Here is the behavior I'm seeing:
Before: After:
As you can see, the buttons are shrinking along their now-vertical width (to what I assume would be the width of the enclosing StackPanel).
Here is the code I am using:
ExpaningMenu.xaml
<UserControl x:Class="Budgety.Controls.ExpandingMenu"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Budgety.Controls"
mc:Ignorable="d"
Name="MainExpandingMenu"
MinWidth="32"
d:DesignHeight="300" d:DesignWidth="100">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Name="MenuPanel" Width="100" HorizontalAlignment="Left" Background="{DynamicResource BackColor}" Grid.Row="1">
<!--Contents will go here-->
</StackPanel>
<Button Name="StateToggle" Width="100" Height="32" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Stretch" Panel.ZIndex="1" Background="{DynamicResource BackColor}" BorderThickness="0" Click="Button_Click" Content="«"></Button>
</Grid>
</UserControl>
ExpandingMenu.xaml.cs
public partial class ExpandingMenu : UserControl
{
public ExpandingMenu()
{
InitializeComponent();
//For testing purposes.
MenuPanel.Children.Add(new ExpandingMenuButton("TEST ITEM 1"));
MenuPanel.Children.Add(new ExpandingMenuButton("TEST ITEM 2"));
MenuPanel.Children.Add(new ExpandingMenuButton("TEST ITEM 3"));
MenuPanel.Children.Add(new ExpandingMenuButton("TEST ITEM 4"));
MenuPanel.Children.Add(new ExpandingMenuButton("TEST ITEM 5xxx"));
foreach (UIElement element in MenuPanel.Children)
{
(element as ExpandingMenuButton).HorizontalAlignment = HorizontalAlignment.Left;
}
}
#region Events
private void Button_Click(object sender, RoutedEventArgs e)
{
if (MenuPanel.Width == 100) //Need to collapse
{
StateToggle.Width = MenuPanel.Width = 32;
(sender as Button).Content = "\u00BB";
//Flip all children of this control (so far, assuming only ExpandingMenuButtons)
foreach (UIElement element in MenuPanel.Children)
{
(element as ExpandingMenuButton).LayoutTransform = new RotateTransform(-90);
//This works to resize to 100 tall (not ideal...)
//(element as ExpandingMenuButton).Width = 100;
//This does not seem to size to auto, which SHOULD make each button as long as the text requires... (this behavior is far less than ideal...)
//(element as ExpandingMenuButton).Width = Double.NaN;
}
}
else //Need to expand
{
StateToggle.Width = MenuPanel.Width = 100;
(sender as Button).Content = "\u00AB";
//Flip all children of this control (so far, assuming only ExpandingMenuButtons)
foreach (UIElement element in MenuPanel.Children)
{
(element as ExpandingMenuButton).LayoutTransform = new RotateTransform(0);
}
}
}
#endregion
}
ExpandingMenuButton.xaml
<UserControl x:Class="Budgety.Controls.ExpandingMenuButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Budgety.Controls"
mc:Ignorable="d"
d:DesignHeight="30" d:DesignWidth="100"
Height="30"
Name="ButtonControl">
<Grid Name="ButtonGrid" Height="30">
<ToggleButton Name="MenuButton" Background="Aqua" BorderThickness="1" Content="TEST"></ToggleButton>
</Grid>
</UserControl>
ExpandingMenuButton.xaml.cs
public partial class ExpandingMenuButton : UserControl
{
//Will definitely want custom functionalty here. TBD. Nothing special so far.
#region Constructors
public ExpandingMenuButton()
{
InitializeComponent();
}
public ExpandingMenuButton(string sText)
{
InitializeComponent();
MenuButton.Content = sText;
}
#endregion
}
If you'd like to test the code out, it should work placed in a normal grid as I have (The above mentioned UserControls I've made are in a Controls folder within the project):
<Window
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:Budgety"
xmlns:Controls="clr-namespace:Budgety.Controls" x:Class="Budgety.MainTest"
mc:Ignorable="d"
Title="MainTest" Height="600" Width="800">
<Grid>
<Controls:ExpandingMenu x:Name="ExpandingMenu" HorizontalAlignment="Left"/>
</Grid>
</Window>
After all is said and done, here is the behavior/look I am after (notice buttons are not shortened)

The reason for the layout you're seeing is the fixed height constraint you placed in ExpandingMenuButton: Height="30" on both the UserControl and the Grid element. You can change it to MinHeight.
In addition, when you set the width of the MenuPanel, you're also containing the height of the buttons, because you apply a transform.
Here's one way to fix this:
private void Button_Click(object sender, RoutedEventArgs e)
{
if (StateToggle.IsChecked == true)
{
StateToggle.Content = "\u00BB";
foreach (FrameworkElement element in MenuPanel.Children)
element.LayoutTransform = new RotateTransform(-90);
}
else
{
StateToggle.Content = "\u00AB";
foreach (FrameworkElement element in MenuPanel.Children)
element.LayoutTransform = null;
}
}
XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Name="MenuPanel"
HorizontalAlignment="Left"
Background="{DynamicResource BackColor}"
Grid.Row="1">
<!--Contents will go here-->
</StackPanel>
<ToggleButton Name="StateToggle"
FontSize="18"
VerticalAlignment="Center"
HorizontalAlignment="Stretch"
Panel.ZIndex="1"
Background="{DynamicResource BackColor}"
BorderThickness="0"
Click="Button_Click"
Content="«" />
</Grid>
As a general rule, don't specify widths and heights in WPF - let the layout system do the measuring for you according to the content.

Winrt Wpf databinding

I am having no luck finding the issue of data binding not working. I have two user controls. The user control that uses the obervablecollection works fine. The user control bound to an object doesnt. If i assign the value to the text the value does appear. During debugging I can verify that the values are correct.
This logic is following Paul Sheriff and a few posts from this web site.
My coworkers dont program in C# so they cant help. Im missing something but have no idea what it is.
ViewModel class that inherits from INotifyPropertyChanged:
ParameterSettings _ps;
public ParameterSettings DetailData
{
get { return _ps; }
set
{
_ps = value;
RaisePropertyChanged("DetailData");
}
}
public async Task GetParameters()
{
var pm = new ParameterManager();
DetailData = new ParameterSettings();
await pm.GetLoginCredentials(_ps);
}
this is the code the user control.
ViewModels.ParameterSettingsVm _viewModel;
public ParameterSettingsUc()
{
this.InitializeComponent();
_viewModel = (ParameterSettingsVm)Resources["viewModel"];
var bounds = Window.Current.Bounds;
this.CancelBtn.Width = bounds.Width * .5;
this.SaveBtn.Width = bounds.Width * .5;
}
private async void UserControl_Loaded(object sender, RoutedEventArgs e)
{
await _viewModel.GetParameters();
//UserNameBx.Text = _viewModel.DetailData.UserLogin; //textbox gets filled in.
}
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SiteManager.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:VM="using:SiteManager.ViewModels"
x:Class="SiteManager.Views.ParameterSettingsUc"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400"
Loaded="UserControl_Loaded">
<UserControl.Resources>
<VM:ParameterSettingsVm x:Key="viewModel"></VM:ParameterSettingsVm>
</UserControl.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
<TextBox Header="Login:" VerticalAlignment="Center" Margin="2,10,0,0" Grid.Row="0" x:Name="UserNameBx" Text="{Binding Path=DetailData.UserLogin, Mode=TwoWay, UpdateSourceTrigger=Default}" >
<TextBox.DataContext>
<VM:ParameterSettingsVm/>
</TextBox.DataContext>
</TextBox>

I would change is it to make the ViewModel a property.
ViewModels.ParameterSettingsVm _viewModel {get;set;}
public ParameterSettingsUc()
{
this.InitializeComponent();
_viewModel = (ParameterSettingsVm)Resources["viewModel"];
var bounds = Window.Current.Bounds;
this.CancelBtn.Width = bounds.Width * .5;
this.SaveBtn.Width = bounds.Width * .5;
}
private async void UserControl_Loaded(object sender, RoutedEventArgs e)
{
await _viewModel.GetParameters();
//UserNameBx.Text = _viewModel.DetailData.UserLogin; //textbox gets filled in.
}
and then I would set the _viewModel as the data context for the textBox. Oh and set the dataContext for the usercontrol to self, like this.
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SiteManager.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:VM="using:SiteManager.ViewModels"
x:Class="SiteManager.Views.ParameterSettingsUc"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
Loaded="UserControl_Loaded">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
<TextBox Header="Login:" VerticalAlignment="Center"
Margin="2,10,0,0" Grid.Row="0" x:Name="UserNameBx"
Text="{Binding Path=DetailData.UserLogin, Mode=TwoWay, UpdateSourceTrigger=Default}"
DataContext={Binding _viewModel}>
</TextBox>
This may not be what you're trying to do though. I just assumed since you're creating _viewModel you would want to use it.

From microsoft virtual academy. Used x:bind its faster and less verbose.
mva.microsoft.com/en-US/training-courses/windows-10-data-binding-14579. Each class property i made into a INotfiyChange property of the vm.
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SiteManager.Views"
xmlns:VM="using:SiteManager.ViewModels"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:diag="using:System.Diagnostics"
x:Class="SiteManager.Views.ParameterSettingsUc"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400"
Loaded="UserControl_Loaded" >
<UserControl.DataContext>
<VM:ParameterSettingsVm></VM:ParameterSettingsVm>
</UserControl.DataContext>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="70"/>
<RowDefinition Height="70"/>
<RowDefinition Height="70"/>
</Grid.RowDefinitions>
<TextBox Header="Login:" VerticalAlignment="Center" Margin="2,10,0,0" Grid.Row="0" x:Name="UserNameBx" Text="{x:Bind Path=_viewModel.UserLogin, Mode=TwoWay }" > </TextBox>
<TextBox Header="Password:" VerticalAlignment="Center" Margin="1" Grid.Row="1" x:Name="PasswordBx" Text="{x:Bind Path=_viewModel.UserPassword, Mode=TwoWay }"> </TextBox>
<TextBox Header="Mature Key:" VerticalAlignment="Center" Margin="1" Grid.Row="2" x:Name="MatureKeyBx" Text="{x:Bind Path=_viewModel.MatureKey, Mode=TwoWay }"> </TextBox>
public sealed partial class ParameterSettingsUc : UserControl
{
ParameterSettingsVm _viewModel { get; set; } = new ParameterSettingsVm();
string _userLogin;
public string UserLogin
{
get { return _userLogin; }
set
{
_userLogin = value;
RaisePropertyChanged("UserLogin");
}
}

C# Universal App: Image foreground while dragging

I have this puzzle game where I can movie pieces on the playfield.
I recently added a touchscreen way to do that, it works, but there is an issue.
When I move an image from one place to another, the dragged image is in the background, the other images are in the foreground, I would like to have it the other way, see Screenshot. 1
My delta function is this:
public void Touch_Delta(object sender, Windows.UI.Xaml.Input.ManipulationDeltaRoutedEventArgs e)
{
Image img_touched = (Image)sender;
TranslateTransform _Transform = (img_touched.RenderTransform = (img_touched.RenderTransform as TranslateTransform) ?? new TranslateTransform()) as TranslateTransform;
_Transform.X += e.Delta.Translation.X;
_Transform.Y += e.Delta.Translation.Y;
if(_Transform.X > 90.0)
{
img_touched.RenderTransform = null;
Move_Right(this, null);
}
else if(_Transform.X < -90)
{
img_touched.RenderTransform = null;
Move_Left(this, null);
}
else if (_Transform.Y > 90.0)
{
img_touched.RenderTransform = null;
Move_Down(this, null);
}
else if (_Transform.Y < -90.0)
{
img_touched.RenderTransform = null;
Move_Up(this, null);
}
Rotate_Touch += e.Delta.Rotation;
if(Rotate_Touch > 55.0)
{
Rotate_Right(this, null);
Rotate_Touch = 0;
}
else if(Rotate_Touch < -55.0)
{
Rotate_Left(this, null);
Rotate_Touch = 0;
}
}
The corresponding XAML is this:
<UserControl
x:Class="PictureSplitter.Views.PictureView"
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"
mc:Ignorable="d"
d:DesignHeight="768"
d:DesignWidth="1024">
<Grid Height="1000" Width="600" Background="Black">
<GridView ItemsSource="{Binding Splitter.PuzzlePositions}" Background="Black">
<GridView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#FF888E91" BorderThickness="2" Background="Black">
<Grid Name="picGrid" Background="Black" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="{Binding Piece.ImageSource}" Tapped="Image_Tapped" ManipulationMode="All" CanDrag="False" Loaded="Load_Events" />
</Grid>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
</UserControl>
I know there is a zindex in the Windows.Canvas thing, but I haven't found something similar here. Is there a way to do this?

Well normally if there is no z-index the elements will follow the z order they were written/generated - I guess if you try to move the 3rd element onto the 2nd one it'd be on top of it :)
Now without using canvas I don't think you can do this, because even the new Transform3D stuff respects the original Z order, so if you'd move one item "above" the others (translate-z: +1) it would still be drawn behind the next ones.
With all this: use a canvas - It's better for a game anyway ;)

WPF resizing, * vs Auto

I have a XAML with 2 columns in a Grid and I have a button that when I click it, in the code behind, I set the visibility to collapse, and want to resize the other half of the screen to try to take up the whole screen. The collapsing part works, and the RHS then shifts over to the LHS, but it does not take up the entire screen. I tried using both the Auto and Star to resize in HidePlots, but it never takes the full screen. I thought if I collapsed the LHS, and set the column to * for the RHS, it would take up the whole screen. Any thoughts? Thanks.
Here's some code to make it more clear:
<Grid Grid.Row="1" x:Name="ExpandableGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="1.5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" x:Name="TableGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<GroupBox Grid.Row="0" Grid.Column="0" x:Name="SampleViewGroupBox" Header="SampleView" HorizontalAlignment="Stretch" FontFamily="Arial" FontSize="12" Margin="5,0,5,0" >
<ContentControl Content="{Binding LayoutManager.SampleView}" Height="Auto" Width="Auto"/>
</GroupBox>
<Button x:Name="TableButton" HorizontalAlignment="Right" Content="Button" Width="15" Height="15" VerticalAlignment="Top" Margin="0,0,-2,0" Click="MaxButton_Click" Grid.Column="0" Grid.Row="0"/>
</Grid>
<Grid Grid.Column="1" x:Name="BaseViewGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<GroupBox Grid.RowSpan="2" Grid.Column="1" Name="BaseViewGroupBox" Header="PLOTS" Margin="5,0,5,0" >
<ContentControl Content="{Binding LayoutManager.ConsensusView}" Height="Auto" Width="Auto" />
</GroupBox>
</Grid>
</Grid>
private void MaxButton_Click(object sender, RoutedEventArgs e)
{
UIElement senderElement = (UIElement)sender;
if (_tableMinimized)
{
HideTables(false);
_tableMinimized = false;
((Button)senderElement).Style = (Style)FindResource("DashboardDetailsButton");
}
else
{
HideTables(true);
_tableMinimized = true;
((Button)senderElement).Style = (Style)FindResource("DashboardDetailsButtonReverse");
}
}
private void HideTables(bool hide)
{
if (hide)
{
foreach (UIElement child in TableGrid.Children)
child.Visibility = Visibility.Collapsed;
for (int i = 0; i < ExpandableGrid.ColumnDefinitions.Count; i++)
ExpandableGrid.ColumnDefinitions[i].Width = GridLength.Auto;
ExpandableGrid.ColumnDefinitions[1].MinWidth = 500;
for (int i = 0; i < ExpandableGrid.RowDefinitions.Count; i++)
ExpandableGrid.RowDefinitions[i].Height = GridLength.Auto;
TableButton.Visibility = Visibility.Visible;
}
else
{
foreach (UIElement child in TableGrid.Children)
child.Visibility = Visibility.Visible;
for (int i = 0; i < ExpandableGrid.ColumnDefinitions.Count; i++)
ExpandableGrid.ColumnDefinitions[i].Width = new GridLength(1, GridUnitType.Star);
for (int i = 0; i < ExpandableGrid.RowDefinitions.Count; i++)
ExpandableGrid.RowDefinitions[i].Height = new GridLength(1, GridUnitType.Star);
}
}
Edit: I tried to also change one line to:
ExpandableGrid.ColumnDefinitions[1].MinWidth = System.Windows.SystemParameters.PrimaryScreenWidth-20;
instead of the hard-coded 500 value, it looks correct. However, if I try to click the button again to revert back to normal, the RHS takes up the bulk of the screen without getting back to its original position.

Your current column definition says to make Column B equal to 1.5 times the size of Column A, so even if ColumnB's content is hidden, the column will still take up 3/5 of the screen.
Change it so the column that collapses has a Width="Auto", and set it's Content's Width equal to whatever size it should be when it's expanded. If you want to keep the 1.5* default width, I'd recommend using something like a MathConverter to figure out what size it should be based on the parent Grid's width. I have the code for one posted here
<Grid x:Name="ParentGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid x:Name="RHS" Grid.Column="0" />
<!-- Collapse this Grid -->
<Grid x:Name="LHS" Grid.Column="1"
Width="{Binding ElementName=ParentGrid, Path=ActualWidth,
Converter={StaticResource MathConverter},
ConverterParameter=((#VALUE/5)*3)}" />
</Grid>

You need to set column 0 to be whatever you desire (Auto, 150, etc...) and set column 1 to be *.
It looks like your Grid is also within a Grid, so the parent's behavior also has to be taken into account.