如何使用WPF使窗口滑出（表达式Blend 4和C#）

发布于 2024-12-04 00:15:23 字数 414 浏览 8 评论 0原文

我试图弄清楚如何连接窗口，以便使用主窗口左侧或右侧的小按钮滑出。我想做的是创建一个主窗体，并连接两个窗口。对于其中一个窗口，当用户按下主窗口上的按钮时，它会使窗口看起来滑出而不是弹出。这是我的想法 http://www.youtube.com/watch? v=CVlSj0yr3rg&feature=lated ..然后，用户更改值，主窗口将更新为新信息。老实说，我已经完成了所有代码的编写，并在 Visual Studio 2010 的 Windows 窗体（带有弹出窗口）中使所有内容都正常工作。但我认为制作一个更具吸引力的 GUI WPF 是可行的方法，而且我喜欢学习它。如果您有任何论坛、教程或一般答案，那就太好了。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤凫 2024-12-11 00:15:23

好的，从视频来看，您确实需要某种可以打开的扩展器，而不是窗口。窗口是一个有边框的区域，标准按钮和标题栏位于顶部。

这可以通过具有两列的网格来完成。一种设置为自动宽度，一种设置为*宽度。在自动调整大小的一个中，您可以放置扩展的内容，而在另一个中则可以放置始终可见的内容。
执行此操作的简单方法：

Xaml

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:StackOverflow"
    x:Class="MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">
    <Grid x:Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" MinWidth="7"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid x:Name="ExpandoGrid"/>
        <Button Content="..." Grid.Column="0" HorizontalAlignment="Right" Margin="0" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Width="6" Height="40" Click="Button_Click"/>
        <Grid x:Name="OtherContentGrid" Grid.Column="1" HorizontalAlignment="Left" Height="100" Margin="-7,0,0,0" VerticalAlignment="Top" Width="100"/>
    </Grid>
</Window>

代码隐藏

Imports System.Collections.ObjectModel
Class MainWindow

    Public Sub New()
        InitializeComponent()
    End Sub

    Private Sub Button_Click(ByVal sender as Object, ByVal e as System.Windows.RoutedEventArgs)
        If Me.ExpandoGrid.Width = 7 Then Me.ExpandoGrid.Width = 200 Else Me.ExpandoGrid.Width = 7
    End Sub
End Class

这绝不是完整的方法，也不是最好的方法。但它是最容易实现的之一。更好的方法是使用 ViewModel 来处理扩展区域的状态，以及一些动画以使其平滑过渡。如果您想要该视频中完成的滑动行为，则可以使用动画。如果您使用 Blend，那么您就有了正确的动画工具。

就我个人而言，我希望这个 Windows ViewModel 有一个属性（我们称其为 Boolean 形式的 DrawerExpanded），自定义 Expander 将其 IsExpanded 属性绑定到该属性。然后，我将创建一个打开动画，用于设置扩展器中内容的宽度，以及一个将宽度设置为 0 的关闭动画。此外，在每个动画中，我可能会设置可见性和不透明度，以使效果更好，不奇怪。假设展开动画在 0.5 秒时将宽度设置为 350，在 0.5 秒时将可见性设置为可见，然后在 0.5 秒到 0.7 秒之间将不透明度从 0 设置为 100。这样抽屉就会滑出，内容很快就会消失在视野中。

如果您想要一个代码示例，您可能需要给我几分钟时间。

OK, so judging from the video you really want some kind of expander that opens and not a Window. A Window is an area with border, and the standard buttons and titlebar at the top.

This can be done with a grid with two columns. One is set to Auto width, one is set to * width. In the Auto sized one you can put your expanding content, and have your always visible content in the other.
The simple way to do this:

The Xaml

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:StackOverflow"
    x:Class="MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">
    <Grid x:Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" MinWidth="7"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid x:Name="ExpandoGrid"/>
        <Button Content="..." Grid.Column="0" HorizontalAlignment="Right" Margin="0" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Width="6" Height="40" Click="Button_Click"/>
        <Grid x:Name="OtherContentGrid" Grid.Column="1" HorizontalAlignment="Left" Height="100" Margin="-7,0,0,0" VerticalAlignment="Top" Width="100"/>
    </Grid>
</Window>

The Code-behind

Imports System.Collections.ObjectModel
Class MainWindow

    Public Sub New()
        InitializeComponent()
    End Sub

    Private Sub Button_Click(ByVal sender as Object, ByVal e as System.Windows.RoutedEventArgs)
        If Me.ExpandoGrid.Width = 7 Then Me.ExpandoGrid.Width = 200 Else Me.ExpandoGrid.Width = 7
    End Sub
End Class

This is by no means the complete way, or the best way. It is one of the simplest to implement though. A better way would be with a ViewModel which would handle the state of the expanded area, along with some animations to make it a smooth transition. If you want the sliding behaviour that is done in that video, animations are where it is at. If you are using Blend, then you have the right tool for animations.

Personally I would have this Windows ViewModel have a property (lets call it DrawerExpanded as Boolean) that a customized Expander would bind its IsExpanded property to. I would then create an open animation that sets the width of the content in the expander, and a close animation that sets the width to 0. Additionally, in each of these I would probably include setting the visibility and opacity to make the effect better and not weird. So lets say expand animation sets Width to 350 at .5 seconds, Visibility to visible at .5 seconds, and then opacity from 0 to 100 from .5 seconds to .7 seconds. That way the drawer slides out and the content fades quickly into view.

If you want a code example of that, you may have to give me a few mins.

回复收藏 0 原文