Question

我正在实现一个具有多行和多列的小型WPF应用程序。第0行和第0列包含MediaElement，第1行和第0列包含全屏按钮。当用户点击全屏按钮时，我想切换到只有两行一列的网格。第0行和第0列将占据MediaElement内部的大部分屏幕空间，第1行和第0列将显示最小化按钮，这将带回原始UI。在传统的窗口中，我们习惯于切换托管WindowsMedia播放器的全屏面板的可见性，以实现此行为。我怎样才能在WPF中实现这一目标？

添加我的XAML代码。

<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>

当用户点击“全屏”按钮时，我希望我的“MediaElement”占据大部分scree空间（通过隐藏所有其他控件）并在屏幕的右下角保留“Restore”按钮。

此致与Hemant

Answer 1

您可以在XAML中完全执行此操作，方法是在其IsChecked属性上使用ToggleButton和触发器，该属性将您不希望看到的所有列/行的宽度/行设置为0.使用x：Name命名元素你想改变，这将使编写触发器更容易。

为了能够访问所有控件，您应该在包含所有其他控件的父控件上定义触发器，例如在UserControl，面板，DataTemplate或ControlTemplate中。要访问不同控件上的属性，请在setter上使用其名称作为TargetName属性。 Trigger本身也有一个相应的SourceName属性，因此您不必在ToggleButton本身上定义Trigger。

Answer 2

最简单的说，您可以使用代码来更改列的大小。这样的东西，连接到按钮的点击事件，将起作用：

首先，为您的网格命名：

 <Grid Name="MyGrid">

然后，按下按钮：

    <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>

并且，使用处理程序来更改网格：

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

该代码将有效地将您要隐藏的列的宽度切换为零，并将它们还原为您在XAML中定义的内容。因为您想要动态地改变Grid元素大小，所以您需要在某个地方的代码中执行此操作。

当然，您可以在样式触发器中定义此行为，或者将您的大小元素连接到ViewModel绑定，但这些主题本身可能与您的体系结构无关。由于您在按钮上定义了具有代码隐藏行为的XAML，因此我将代码放在代码隐藏中;重点是，您可以改变Grid ColumnDefinition和RowDefinition元素的大小来隐藏它们。

这可以避免模板或触发问题，但也会引入“关注点分离”问题，如果它是复杂项目的一部分，可能会使您的内容难以维护。

在WPF中缩放屏幕的特定部分

2 个答案: