0

我正在实现一个具有多行多列的小型 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”占据大部分屏幕空间（通过隐藏所有其他控件）并将“恢复”按钮留在屏幕的右下角。

问候，赫曼特

4

2 回答 2

1

您可以在 XAML 中完全做到这一点，方法是使用 ToggleButton 和 IsChecked 属性上的触发器，该属性将您不想看到的所有列/行的宽度/高度设置为 0。使用 x:Name 命名您想要的元素更改，这将使编写触发器更容易。

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

于 2013-05-19T07:45:15.450 回答
0

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

首先，命名您的网格：

 <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元素的大小来隐藏它们。

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

于 2013-05-24T00:50:07.577 回答