Zooming in specific part of screen in WPF - wpf

Question

I am implementing one small WPF application which has multiple rows and multiple columns. 0th row and 0th column contains a MediaElement and 1st row and 0th column contains a full screen button. When user clicks on full screen button I want to switch to a gird which has only two rows and one column. 0th row and 0th column will occupy most of the screen space having inside MediaElement and 1st row and 0th column will show a minimize button which will bring original UI back.
In traditional windows we were used to toggle visibility of a full screen panel hosting WindowsMedia player to achieve this behavior. How can I achieve this in WPF?
Adding my XAML code.
<Window x:Class="LearnEnglish.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Height="350"
Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<MediaElement LoadedBehavior="Manual"
Name="me"
Source="C:\Users\Pritam\Documents\Freecorder\Screen\Northern Ireland Scene 1 LearnEnglish British Council.wmv"
Volume="{Binding ElementName=txtVolume,Path=Text}"
Grid.ColumnSpan="2">
</MediaElement>
<Button Click="Button_Click"
Grid.Row="1"
Margin="4">Play</Button>
<Button Click="Button_Click"
Grid.Row="1"
Grid.Column="1"
Margin="4">Full Screen</Button>
<Button Click="Button_Click"
Grid.Row="1"
Grid.Column="1"
Margin="4"
Visibility="Hidden">Restore</Button>
</Grid>
</Window>
When user clicks on 'Full Screen' button I want my 'MediaElement' to occupy most of the scree space ( by hiding all other controls ) and leaving 'Restore' button in the bottom-right hand side of screen.
Regards,
Hemant

Answer 1

You can do that completely in XAML by using a ToggleButton and a trigger on its IsChecked property which sets the width / height of all columns / rows you don't want to see to 0. Use x:Name to name the elements you want to change, that will make it easier to write the Trigger.
In order to be able to access all controls, you should define the trigger on a parent control which contains all the other controls, e.g. in a UserControl, a panel, a DataTemplate or ControlTemplate. In order to access the properties on different controls, use their names for the TargetName property on the setters. There is also a corresponding SourceName property on Trigger itself, so you don't have to define the Trigger on the ToggleButton itself.

Answer 2

Most simply, you would use code to change the size of your columns. Something like this, wired to the click events of your buttons, would work:
First, name your Grid:
<Grid Name="MyGrid">
Then, wire your buttons:
<Button Click="Button_Click" Grid.Row="1" Margin="4">Play</Button>
<Button Name="FullScreenButton" Click="FullScreenButton_Click" Grid.Row="1" Grid.Column="1" Margin="4">Full Screen</Button>
<Button Name="RestoreButton" Click="RestoreButton_Click" Grid.Row="1" Grid.Column="1" Margin="4" Visibility="Hidden">Restore</Button>
And, use handlers to change the grid:
Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
meVid.Play()
End Sub
Private Sub FullScreenButton_Click(sender As Object, e As RoutedEventArgs)
MyGrid.ColumnDefinitions.Item(2).Width = New GridLength(0)
MyGrid.ColumnDefinitions.Item(3).Width = New GridLength(0)
FullScreenButton.Visibility = Windows.Visibility.Hidden
RestoreButton.Visibility = Windows.Visibility.Visible
End Sub
Private Sub RestoreButton_Click(sender As Object, e As RoutedEventArgs)
MyGrid.ColumnDefinitions.Item(2).Width = New GridLength(2, GridUnitType.Star)
MyGrid.ColumnDefinitions.Item(3).Width = New GridLength(1, GridUnitType.Star)
FullScreenButton.Visibility = Windows.Visibility.Visible
RestoreButton.Visibility = Windows.Visibility.Hidden
End Sub
That code will effectively toggle the widths of the columns you want to hide, to zero, and restore them to what you had defined in the XAML. Because you want to dynamically vary your Grid element sizes, you will need to do this in code someplace.
You can, of course, define this behavior in style triggers, or wire your size elements to ViewModel bindings, but those are topics all by themselves which might not pertain to your architecture. Since you defined XAML with code-behind behavior on the buttons, I put the code in the code-behind; the point is, you vary the size of your Grid ColumnDefinition and RowDefinition elements to hide them.
This avoids problems with templates or triggering but also introduces "separation of concerns" issues which may make your stuff harder to maintain, if it's part of a complex project.