I have a UserControl in Silverlight 3.
The LayoutRoot grid contains one child, a grid, which is made up of three columns and two rows.
Below is the layout:
<Grid x:Name="LayoutRoot" Background="White">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid x:Name="NavigationGrid" Grid.RowSpan="2" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<!-- Content placed here -->
</Grid>
<Border Background="Transparent" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="0" BorderBrush="Black" BorderThickness="0,0,0,0" Height="38" HorizontalAlignment="Stretch" Width="Auto">
<!-- Content placed here -->
</Border>
<Border Background="Transparent" Grid.Column="2" Grid.Row="1" Grid.RowSpan="2" BorderBrush="Black" BorderThickness="0,0,1,1" Height="Auto" VerticalAlignment="Stretch" Width="38">
<!-- Content placed here -->
</Border>
<Border Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="Auto" Background="White" BorderBrush="Black" BorderThickness="0,0,1,1" Width="Auto">
<!-- Content placed here -->
</Border>
</Grid>
</Grid>
I have functionality that uses an adorner. The adorner attaches itself to a specified framework element.
This functionality is invoked when the user clicks on a button that is located in the upper-right corner of the grid named NavigationGrid. The button containins an icon of a pushpin. This functionality removes the NavigationGrid grid from it’s parent’s children, and adds it to the children of the LayoutRoot grid. The adorner allows the user to be able to drag the grid around the screen.
If the user clicks on the pushpin button again, the intended functionality is for the grid to be removed from the LayoutRoot children, and to be added back to it’s original parent’s children, with the Grid.Column, Grid.RowSpan etc. values.
The problem I am running into is when the NavigationGrid grid is initially removed from it’s parent’s children, all of the other elements in the grid resize etc. This is ok, as it is what I wanted. But, when the grid is placed back into it’s parent’s children, it’s location is not the same as it was originally. I checked the Margin property, and it is set to 0. So, because it’s location is not identical to it’s original location, I programatically set it’s margin to a negative value that puts it back visually to where it was originally. This throws off the location of the other elements, and everything begins to overlap etc.
So, my question is, does anyone know how I can achieve this functionality such that the NavigationGrid grid can be removed from it’s parent and later placed back into it’s parent, with it’s original placement/location being in tact?
Thanks.
Chris
Below is a screenshot of the UI. For obvious reasons, I have blacked out certain parts of the UI. The grid on the left, with the label “Processes”, is the grid that the user should be able to ‘unpin’ and move around, which does work, it’s the functionality that places it back in place that creates the problem.
Refer to code behind method below that handles pin/unpin functionality:
public void PinMenu(object parameter)
{
if (_navigationGridPinned)
{
PushPinImagePath = new Uri("../Images/pushpin_pinned.png", UriKind.Relative);
_navigationGridPinned = false;
var e = parameter as MouseButtonEventArgs;
if (!e.IsNull())
{
var grid = ValidationHelper.GetPanelFromVisualTree(Application.Current.RootVisual, "NavigationGrid") as Grid;
if (!grid.IsNull())
{
grid.MeasureAndArrange();
double gridHeight = grid.ActualHeight;
double gridWidth = grid.ActualWidth;
grid.HorizontalAlignment = HorizontalAlignment.Left;
grid.VerticalAlignment = VerticalAlignment.Top;
grid.Margin = new Thickness(0, 0, 0, 0);
var parent = grid.Parent as Grid;
parent.Children.Remove(grid);
var layoutRootGrid = parent.Parent as Grid;
if (!layoutRootGrid.IsNull())
{
_originalOffset = parent.TransformToVisual(layoutRootGrid).Transform(new Point(0, 0));
grid.Height = gridHeight;
grid.Width = gridWidth;
var border = grid.Children[0] as Border;
if (!border.IsNull())
{
border.BorderThickness = new Thickness(1, 1, 1, 1);
var backgroundBrush = App.Current.Resources["GradientBlueBrush"] as LinearGradientBrush;
if (!backgroundBrush.IsNull())
{
border.Background = backgroundBrush;
}
}
layoutRootGrid.Children.Add(grid);
Grid.SetRow(grid, 1);
_adorner = new Adorner();
_adorner.HorizontalAlignment = HorizontalAlignment.Left;
_adorner.VerticalAlignment = VerticalAlignment.Top;
_adorner.AdornedElement = grid as FrameworkElement;
_adorner.adorned_MouseLeftButtonDown((FrameworkElement)grid, e);
}
}
}
}
else
{
_navigationGridPinned = true;
PushPinImagePath = new Uri("../Images/pushpin.png", UriKind.Relative);
var grid = ValidationHelper.GetPanelFromVisualTree(Application.Current.RootVisual, "NavigationGrid") as Grid;
if (!grid.IsNull())
{
var parent = grid.Parent as Grid;
if (parent != null)
{
var mainViewGrid = ValidationHelper.GetPanelFromVisualTree(Application.Current.RootVisual, "MainViewGrid") as Grid;
var parentGrid = mainViewGrid.Parent as Grid;
var layoutRootGrid = parentGrid.Parent as Grid;
var currentOffset = grid.TransformToVisual(layoutRootGrid).Transform(new Point(0, 0));
Point p = new Point(-(currentOffset.X - _originalOffset.X), -(currentOffset.Y - _originalOffset.Y));
parent.Children.Remove(grid);
parent.UpdateLayout();
grid.MeasureAndArrange();
var navBorder = ValidationHelper.GetPanelFromVisualTree(Application.Current.RootVisual, "NavBorder") as Border;
var tabMenuBorder = ValidationHelper.GetPanelFromVisualTree(Application.Current.RootVisual, "TabMenuBorder") as Border;
var processMapBorder = ValidationHelper.GetPanelFromVisualTree(Application.Current.RootVisual, "ProcessMapBorder") as Border;
mainViewGrid.Children.Clear();
var border = grid.Children[0] as Border;
if (!border.IsNull())
{
border.Background = new SolidColorBrush(Colors.Transparent);
border.BorderThickness = new Thickness(1, 0, 1, 1);
}
_adorner.HorizontalAlignment = HorizontalAlignment.Left;
_adorner.VerticalAlignment = VerticalAlignment.Top;
_adorner.Margin = new Thickness(0, 0, 0, 0);
_adorner.AdornedElement = null;
mainViewGrid.Children.Add(tabMenuBorder);
Grid.SetColumn(tabMenuBorder, 2);
Grid.SetRowSpan(tabMenuBorder, 2);
Grid.SetRow(tabMenuBorder, 1);
mainViewGrid.Children.Add(processMapBorder);
Grid.SetColumn(processMapBorder, 1);
Grid.SetRow(processMapBorder, 1);
mainViewGrid.Children.Add(navBorder);
Grid.SetColumnSpan(navBorder, 2);
Grid.SetRow(navBorder, 0);
Grid.SetColumn(navBorder, 1);
grid.Margin = new Thickness(p.X, p.Y, 0, 0);
mainViewGrid.Children.Add(grid);
Grid.SetColumn(grid, 0);
Grid.SetRow(grid, 0);
Grid.SetRowSpan(grid, 2);
}
}
}
}
One strategy might be to wrap your “NavigationGrid” inside of a container grid “ContainerGrid” that is “Visible” when pinned, and “Collapsed” when unpinned. That way, when re-parenting during the pin operation, you can place the “NavigationGrid” back inside the named “ContainerGrid”.