Question

我是WPF的新手，所以这可能是一个简单的问题。基本上，我试图在没有代码隐藏的情况下学习我能做些什么。

开发环境：Windows 10，Visual Studio 2015社区，开始使用＆＃34;空白应用程序（通用Windows）＆＃34;项目

我已经知道按钮我可以

<Button x:Name="btn1" Content="Button" Click="btn1_Click"/>

然后在代码隐藏中定义btn1_Click。但有时这似乎并不简单。有没有办法在xaml中定义按钮点击行为，没有代码隐藏？

我试过了：

<Page
    x:Class="TestApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="btn" FontSize="64" Content="Button">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="btn" Storyboard.TargetProperty="Width" To="500"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Page>

它编译得很好，但是当我启动应用程序时，它会在初始化时抛出异常：

// In MainPage.xaml.cs
// This file was vs-generated. I did not modify it in any way

// In class MainPage
public MainPage()
{
    this.InitializeComponent(); // Exception is thrown here
}

例外XamlParseException：无法分配给属性＆＃39; Windows.UI.Xaml.EventTrigger.RoutedEvent＆＃39;。 [行：13位置：31]

那是什么意思？我这样做是错误的吗？

Answer 1

所以，这是一个多部分的问题。就你的例外情况而言：

您需要为按钮设置默认Width或在From中设置DoubleAnimation属性：

<Button x:Name="btn" FontSize="64" Content="Button" Width="200">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="btn" 
                            Storyboard.TargetProperty="Width" To="500"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Button.Triggers>
</Button>

这是因为默认情况下，Width设置为Double.NaN。

当你谈论处理按钮的点击事件时，我感觉你在谈论视觉行为。在XAML中执行此操作是WPF中的首选方法，并且有许多不同的方法。您正在使用Storyboard做的很好，并且有无数其他方法，因为WPF非常灵活。如果你在谈论与UI行为无关的实际C＃代码，那么你将从学习MVVM模式中受益。

Answer 2

XAML内置了对命令模式的支持。

我正在使用MVVM Light toolkit中的RelayCommand。（如果你不使用MVVM Light，你可以在接口上有自己的具体实现：System.Windows.Input.ICommand）

首先，您可以在单击按钮后定义行为。

MainPage.xaml.cs（请注意，在现实世界中，您应该将Command放在ViewModel中）

private RelayCommand _testCommand;
public RelayCommand TestCommand
{
    get
    {
        return _testCommand
            ?? (_testCommand = new RelayCommand(
                () =>
                {
                    System.Diagnostics.Debug.WriteLine("Test Button Clicked.");
                }));
    }
}

public MainPage()
{
    this.InitializeComponent();

    // Set the object that contain the Command to the page's data context
    // Again, you should set the DataContext to the ViewModel that contain the Command
    this.DataContext = this;
}

MainPage.xaml中

<Button Command="{Binding TestCommand}" Content="Test Button" ></Button>

Answer 3

您可以使用普通的XAML实现一些交互性。但这种交互性受限制，如改变视觉状态，动画属性，改变样式，制作原型等。要探索无代码可以做什么，您可以探索Expression Blend，以及行为，数据存储，动画（时间轴和基元）等概念。如果你认为你可以像在asp.net中那样编写类似的东西，那么你就不能。

在上面的代码中，您必须在按钮中设置宽度或使用From属性和To。

如何使用没有代码隐藏的按钮

3 个答案: