【问题标题】:Why won't my XAML interactivity behaviors work in a user control为什么我的 XAML 交互行为在用户控件中不起作用
【发布时间】:2017-06-29 06:10:04
【问题描述】:

我正在开发一个利用交互行为打开/关闭 UI 元素的 UWP 应用程序。

作为一个小背景故事,我的应用程序之前使用复制/粘贴的 XAML 来为客户选择刀片视图和所有相关视图中的刀片。

在 XAML 中包含交互行为/触发器,它们会在完美运行的按钮单击时关闭一个刀片并打开另一个刀片。

考虑到在所有地方复制粘贴相同的 XAML 的混乱,我清理了那个 UI 部分并将其移动到它自己的用户控件中,我只是设法按照我需要的方式使用绑定和所有内容来工作。唯一的问题是我的交互行为/触发器不再起作用,因为它们是用户控件的一部分。

这是与按钮内的行为/触发器相关的特定 XAML:

<Button x:Name="CreatNewCustomer"
                            HorizontalAlignment="Stretch"
                            Content="New Customer"
                            VerticalAlignment="Stretch"
                            Height="45"
                            Background="#FF007ACC"
                            Width="auto"
                            Foreground="#FFCDCDCD"
                            Margin="5">
                        <interactivity:Interaction.Behaviors>
                            <core:EventTriggerBehavior EventName="Click">
                                <core:ChangePropertyAction  TargetObject="NewCustomerBlade"
                                                            PropertyName="IsOpen"
                                                            Value="True" />
                            </core:EventTriggerBehavior>
                        </interactivity:Interaction.Behaviors>
                    </Button>

这是我的整个用户控件:

<UserControl x:Class="myapp.Views.CustomerDatabaseControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="using:retailemployeetoolset.Views"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
         xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
         xmlns:core="using:Microsoft.Xaml.Interactions.Core"
         xmlns:models="using:myapp.Models"
         mc:Ignorable="d"
         d:DesignHeight="840"
         d:DesignWidth="1320">

<Grid x:Name="AddCustomerBlades">

    <controls:BladeView x:Name="CustomerSearchBladeview"
                        IsEnabled="True"
                        BladeMode="Fullscreen">
        <controls:BladeItem x:Name="SearchCustomerBlade"
                            Width="1325"
                            Background="#FF1E1E1E"
                            Height="712"
                            TitleBarVisibility="Collapsed"
                            IsOpen="True"
                            BorderThickness="5"
                            BorderBrush="#FF707070">
            <StackPanel>
                <StackPanel Orientation="Horizontal"
                            Height="65">
                    <TextBlock Text="Customers"
                               FontSize="38"
                               Margin="10"
                               Foreground="#FFCDCDCD"
                               Width="825" />
                    <StackPanel Orientation="Horizontal"
                                Width="465">
                        <TextBlock Text="Search: "
                                   FontSize="28"
                                   Margin="5"
                                   Foreground="#FFCDCDCD"
                                   Width="90"
                                   VerticalAlignment="Center" />
                        <TextBox x:Name="CustomerSearch"
                                 TextWrapping="Wrap"
                                 Height="46"
                                 Width="350"
                                 Margin="5" />
                    </StackPanel>
                </StackPanel>
                <StackPanel Orientation="Horizontal"
                            Margin="5"
                            HorizontalAlignment="Right">
                    <Button x:Name="CreatNewCustomer"
                            HorizontalAlignment="Stretch"
                            Content="New Customer"
                            VerticalAlignment="Stretch"
                            Height="45"
                            Background="#FF007ACC"
                            Width="auto"
                            Foreground="#FFCDCDCD"
                            Margin="5">
                        <interactivity:Interaction.Behaviors>
                            <core:EventTriggerBehavior EventName="Click">
                                <core:ChangePropertyAction  TargetObject="NewCustomerBlade"
                                                            PropertyName="IsOpen"
                                                            Value="True" />
                            </core:EventTriggerBehavior>
                        </interactivity:Interaction.Behaviors>
                    </Button>
                    <Button x:Name="CloseCustomerWindow"
                            HorizontalAlignment="Stretch"
                            Content="Close Window"
                            VerticalAlignment="Stretch"
                            Height="45"
                            Background="#FF007ACC"
                            Width="auto"
                            Foreground="#FFCDCDCD"
                            Margin="5" />
                </StackPanel>
                <StackPanel Margin="0,5"
                            Orientation="Horizontal">
                    <StackPanel Width="1307">
                        <GridView Name="CustomerList"
                                  ItemsSource="{Binding CustomerDatabase}"
                                  SelectedItem="{Binding SelectedCustomer, Mode=TwoWay}"
                                  Width="auto"
                                  Height="685"
                                  Background="#FF2E2B2B"
                                  BorderThickness="3"
                                  BorderBrush="#FF707070"
                                  Margin="10,0,8,0">
                            <GridView.Header>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="254" />
                                        <ColumnDefinition Width="254" />
                                        <ColumnDefinition Width="254" />
                                        <ColumnDefinition Width="254" />
                                        <ColumnDefinition Width="254" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="auto" />
                                        <RowDefinition Height="8" />
                                    </Grid.RowDefinitions>
                                    <TextBlock Grid.Row="0"
                                               Grid.Column="0"
                                               Text="First Name"
                                               TextAlignment="Center"
                                               FontWeight="Bold"
                                               FontSize="16"
                                               Margin="7,0,0,1"
                                               Foreground="#FFCDCDCD" />
                                    <TextBlock Grid.Row="0"
                                               Grid.Column="1"
                                               Text="Last Name"
                                               TextAlignment="Center"
                                               FontWeight="Bold"
                                               FontSize="16"
                                               Margin="7,0,0,1"
                                               Foreground="#FFCDCDCD" />
                                    <TextBlock Grid.Row="0"
                                               Grid.Column="2"
                                               Text="Enail"
                                               TextAlignment="Center"
                                               FontWeight="Bold"
                                               FontSize="16"
                                               Margin="7,0,0,1"
                                               Foreground="#FFCDCDCD" />
                                    <TextBlock Grid.Row="0"
                                               Grid.Column="3"
                                               Text="Phone Number"
                                               TextAlignment="Center"
                                               FontWeight="Bold"
                                               FontSize="16"
                                               Margin="7,0,0,1"
                                               Foreground="#FFCDCDCD" />
                                    <TextBlock Grid.Row="0"
                                               Grid.Column="4"
                                               Text="Organization"
                                               TextAlignment="Center"
                                               FontWeight="Bold"
                                               FontSize="16"
                                               Margin="7,0,0,1"
                                               Foreground="#FFCDCDCD" />
                                </Grid>
                            </GridView.Header>
                            <GridView.ItemContainerStyle>
                                <Style TargetType="GridViewItem">
                                    <Setter Property="Margin"
                                            Value="7,0,0,1" />
                                    <Setter Property="HorizontalAlignment"
                                            Value="Center" />
                                </Style>
                            </GridView.ItemContainerStyle>
                            <GridView.ItemTemplate>
                                <DataTemplate x:DataType="models:Customer">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="254" />
                                            <ColumnDefinition Width="254" />
                                            <ColumnDefinition Width="254" />
                                            <ColumnDefinition Width="254" />
                                            <ColumnDefinition Width="254" />
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="45" />
                                        </Grid.RowDefinitions>


                                        <Border BorderThickness="2"
                                                BorderBrush="#FF575454"
                                                Grid.Column="0">
                                            <TextBlock Text="{x:Bind CustomerFirstName}"
                                                       Foreground="#FFCDCDCD"
                                                       Width="auto"
                                                       Margin="0,8,0,-2"
                                                       TextAlignment="Center" />
                                        </Border>
                                        <Border BorderThickness="2"
                                                BorderBrush="#FF575454"
                                                Grid.Column="1">
                                            <TextBlock Text="{x:Bind CustomerLastName}"
                                                       Foreground="#FFCDCDCD"
                                                       Width="auto"
                                                       Margin="0,10,0,0"
                                                       TextAlignment="Center" />
                                        </Border>
                                        <Border BorderThickness="2"
                                                BorderBrush="#FF575454"
                                                Grid.Column="2">
                                            <TextBlock Text="{x:Bind CustomerEmail}"
                                                       Foreground="#FFCDCDCD"
                                                       Width="auto"
                                                       Margin="0,8,0,0"
                                                       TextAlignment="Center" />
                                        </Border>
                                        <Border BorderThickness="2"
                                                BorderBrush="#FF575454"
                                                Grid.Column="3">
                                            <TextBlock Text="{x:Bind CustomerPhoneNumber}"
                                                       Foreground="#FFCDCDCD"
                                                       Width="auto"
                                                       TextAlignment="Center" />
                                        </Border>
                                        <Border BorderThickness="2"
                                                BorderBrush="#FF575454"
                                                Grid.Column="4">
                                            <TextBlock Text="{x:Bind OrganizationName}"
                                                       Foreground="#FFCDCDCD"
                                                       Width="auto"
                                                       TextAlignment="Center" />
                                        </Border>
                                    </Grid>
                                </DataTemplate>
                            </GridView.ItemTemplate>
                        </GridView>
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </controls:BladeItem>
        <controls:BladeItem x:Name="CustomerAddBlade"
                            Width="1320"
                            Background="#FF1E1E1E"
                            Height="835"
                            TitleBarVisibility="Collapsed"
                            IsOpen="False"
                            BorderThickness="5"
                            BorderBrush="#FF707070">
            <StackPanel>
                <TextBlock Text="Add Customer"
                           FontSize="48"
                           Foreground="#FFCDCDCD"
                           Height="56"
                           Margin="15"
                           HorizontalAlignment="Left" />
                <StackPanel  HorizontalAlignment="Center"
                             Width="409">
                    <StackPanel Margin="10,0">
                        <TextBlock Text="Email Address:"
                                   FontSize="22"
                                   Foreground="#FFCDCDCD"
                                   Height="36"
                                   Margin="3" />
                        <TextBox x:Name="EmailBox"
                                 TextWrapping="Wrap"
                                 Height="50"
                                 Margin="3" />
                    </StackPanel>
                    <StackPanel Margin="10,0">
                        <TextBlock Text="First Name:"
                                   FontSize="22"
                                   Foreground="#FFCDCDCD"
                                   Height="36"
                                   Margin="3" />
                        <TextBox x:Name="FirstNameBox"
                                 TextWrapping="Wrap"
                                 Height="50"
                                 Margin="3" />
                    </StackPanel>
                    <StackPanel Margin="10,0">
                        <TextBlock Text="Last Name:"
                                   FontSize="22"
                                   Foreground="#FFCDCDCD"
                                   Height="36"
                                   Margin="3" />
                        <TextBox x:Name="LastNameBox"
                                 TextWrapping="Wrap"
                                 Height="50"
                                 Margin="3" />
                    </StackPanel>
                    <StackPanel Margin="10,0">
                        <TextBlock Text="Phone Number:"
                                   FontSize="22"
                                   Foreground="#FFCDCDCD"
                                   Height="36"
                                   Margin="3" />
                        <TextBox x:Name="PhoneBox"
                                 TextWrapping="Wrap"
                                 Height="50"
                                 Margin="3" />
                    </StackPanel>
                    <CheckBox x:Name="BusinessCustomerCheckbox"
                              Content="Business Customer"
                              HorizontalAlignment="Stretch"
                              VerticalAlignment="Stretch"
                              Height="21"
                              Margin="10"
                              Foreground="#FFCDCDCD" />
                    <StackPanel x:Name="OrgNamePanel"
                                Visibility="Visible"
                                Margin="10,0">
                        <TextBlock Text="Organization Name:"
                                   FontSize="22"
                                   Foreground="#FFCDCDCD"
                                   Height="36"
                                   Margin="3" />
                        <TextBox x:Name="BusinessNameBox"
                                 TextWrapping="Wrap"
                                 Height="50"
                                 Margin="3" />
                    </StackPanel>
                    <Button x:Name="AddNewCustomerButton"
                            HorizontalAlignment="Stretch"
                            Content="Add Customer"
                            VerticalAlignment="Stretch"
                            Height="60"
                            Background="#FF007ACC"
                            Foreground="#FFCDCDCD"
                            Margin="20">

                    </Button>
                </StackPanel>
            </StackPanel>
        </controls:BladeItem>
    </controls:BladeView>
</Grid>

在用户控件中使用行为时,是否需要做一些不同的事情?还是不能在用户控件中使用它们?

我可以在后面的代码中为用户控件创建属性来处理我的刀片的打开和关闭,但这感觉就像它会变得更加草率并且需要比使用行为所需的 8 行代码更多的代码。

编辑: 添加我收到的异常以防其他人搜索类似的错误。

“在 String 类型上找不到名为 Windows.UI.Xaml.PropertyPath 的属性。”

【问题讨论】:

  • 其实我没看到你在哪里定义了NewCustomerBlade?​​span>
  • 你说得对,我只是注意到我更改了刀片的名称,并没有更新 TargetObject="NewCustomerBlade"。但是,在您的解决方案之前,我遇到了一个我不再遇到的异常。

标签: c# xaml mvvm user-controls uwp


【解决方案1】:

我认为TargetObject="NewCustomerBlade" 行不通。可以试试TargetObject="{Binding ElementName=NewCustomerBlade}"吗?

您还需要将此行为置于NewCustomerBlade 控件所在的用户控件之外。确保 Button 和控件在同一页面上。

【讨论】:

  • 知道为什么当代码位于 Page 而不是 UserControl 时,代码在不使用 {Binding ElementName=NewCustomerBlade} 的情况下工作吗?
  • 这告诉我该行为可以处理名称字符串,因此如果 TargetObject 是字符串而不是实际元素,则它必须使用可视化树帮助器来定位元素。
  • 考虑到例外的措辞,这是有道理的。
【解决方案2】:

听起来您的事件处理程序没有得到正确解决。如果您在与控件不同的类中指定单击处理程序,则可以将其与 x:bind 连接。

查看以下取自MSDN的代码

<ComboBox x:Name="ColorComboBox"
      ItemsSource="{x:Bind SettingsVM.Colors}"
      SelectionChanged="{x:Bind SettingsVM.ColorDefinitionChanged(SelectedItem)}" />

void ColorDefinitionChanged(ColorDefinition def)
{
   ...
}

【讨论】:

  • 该链接有助于提供一些有关绑定的上下文,谢谢。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-04-04
  • 1970-01-01
  • 1970-01-01
  • 2020-11-28
  • 2021-04-01
  • 1970-01-01
相关资源
最近更新 更多