XAML 使用 APP.xaml 中的事件外包数据模板
XAML outsourcing datatemplate with events in APP.xaml
我有一个 ListView 和 ItemTemplate
的工作数据模板
<ListView ItemTemplate="{StaticResource MYTEMPLATE}"
HorizontalAlignment="Center"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ContinuumNavigationTransitionInfo.IsEntranceElement="True">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel VerticalAlignment="Bottom"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
模板看起来像这样：
<DataTemplate x:Key="GlobalBox">
<Border Background="#FFFFFFFF" Margin="10 0 0 5" CornerRadius="2 2 15 2">
<Grid Width="380">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Tag="{Binding ID}" Name="ProfileInfo" Tapped="Profile_Tapped" Orientation="Horizontal" Margin="15 15 15 0">
<Grid Width="360" Margin="0 0 0 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="50"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Height="45" Width="45" CornerRadius="5">
<Border.Background>
<ImageBrush ImageSource="{Binding ImagePath}" Stretch="UniformToFill"/>
</Border.Background>
</Border>
<StackPanel Grid.Column="1" Orientation="Vertical" Margin="0 5 0 0">
<TextBlock Text="{Binding Name}" Foreground="Black" FontSize="18" FontWeight="Bold"></TextBlock>
<TextBlock Text="{Binding Handle}" Foreground="DarkGray" FontSize="12"/>
</StackPanel>
<Image Grid.Column="2" Source="Assets/ActionIcons/logo_blue_32.png" Width="32" VerticalAlignment="Top"></Image>
</Grid>
</StackPanel>
<StackPanel Grid.Row="1" Margin="14.5,0,0,0" Height="Auto">
<StackPanel Name="TweetContent" Tag="{Binding ID}" Margin="15 0 15 0" Tapped="Content_Tapped">
<TextBlock Text ="{Binding Content}" TextWrapping="Wrap" Foreground="Black" FontSize="14" Margin="0 0 0 10"/>
<ItemsControl ItemsSource="{Binding ContentImages}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding }" MaxWidth="350" Margin="0 0 0 5" HorizontalAlignment="Center"></Image>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBlock Foreground="DarkGray" Text="{Binding DateSend}" FontSize="10"></TextBlock>
</StackPanel>
<StackPanel Name="ActionButtons">
<Grid Tag="{Binding ID}" Width="380" Height="25" Margin="0 0 0 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" HorizontalAlignment="Center" Margin="20 0 0 0" Style="{StaticResource replyActionButton}" Tapped="Reply_Tapped"></Button>
<ToggleButton Grid.Column="2" HorizontalAlignment="Center"
Style="{StaticResource retweetActionButton}"
Tapped="Retweet_Tapped"></ToggleButton>
<TextBlock Grid.Column="3" HorizontalAlignment="Left" Margin="-15 0 0 0" VerticalAlignment="Center" Text="{Binding RetweetCount}" Foreground="DarkGray"/>
<ToggleButton Grid.Column="4" HorizontalAlignment="Center"
Style="{StaticResource likeActionButton}"
IsChecked="{Binding LikeState}"
Tapped="Favourite_Tapped"></ToggleButton>
<TextBlock Grid.Column="5" HorizontalAlignment="Left" Margin="-15 0 0 0" VerticalAlignment="Center" Text="{Binding LikeCount}" Foreground="DarkGray"/>
</Grid>
</StackPanel>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
现在，当我将模板放入 app.xaml 文件时，出现以下编译错误
无法在应用程序中设置事件 class XAML 文件
这对我来说很有意义，但我该怎么做呢？我可以将变量之类的不同事件传递到数据模板中吗？
//更新 - 使用 USERCONTROL 的解决方案 WAY2：
我用上面的代码制作了一个 UserControl 并在 ListView 中实现了它。
<ListView Grid.Row="1" Margin="0 0 0 5"
x:Name = "standardBox"
HorizontalAlignment="Center"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ContinuumNavigationTransitionInfo.IsEntranceElement="True">
<ListView.ItemTemplate>
<DataTemplate>
<local:UCGlobal></local:UCGlobal>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel VerticalAlignment="Bottom"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
您可以使用 Command 和 EventTrigger 并将其绑定到视图模型的命令。
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tapped">
<i:InvokeCommandAction Command="{Binding TappedCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
或者用小 UserControl 代替 DataTemplate:
<UserControl... >
<StackPanel>
<Button x:Name="button1" Content="Button" Click="button1_Click"/>
</StackPanel>
</UserControl>
并在您的 app.xaml:
中使用它
<DataTemplate x:Key="Template">
<Grid>
<local:myUserControl/>
</Grid>
</DataTemplate>
您可以使用一些备选方案：
使用模板中按钮的命令 属性（注意 DataContext 设置正确，以避免绑定错误）：
<DataTemplate x:Key="MyTemplate">
<StackPanel>
<Button x:Name="button1" Content="Button1" Command="{Binding Btn1Command}" CommandParameter="{Binding ElementName=button1}"/>
<Button x:Name="button2" Content="Button2" Command="{Binding Btn2Command}" CommandParameter="{Binding ElementName=button2}"/>
<Button x:Name="button3" Content="Button3" Command="{Binding Btn3Command}" CommandParameter="{Binding ElementName=button3}"/>
</StackPanel>
</DataTemplate>
如果是另一种类型的事件不会调用命令，您可以使用 InvokeCommandAction，其处理方式与下一个示例中所示的相同。
使用像CallMethodAction这样的触发器（同上。DataContext是搜索方法的地方。）：
<DataTemplate x:Key="MyTemplate">
<StackPanel>
<Button x:Name="button1" Content="Button1" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tapped">
<ei:CallMethodAction MethodName="button1_Tapped"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>...
写一个小UserControl作为你DataTemplate的基础:
XAML:
<UserControl x:Class="ThreeBtnUserCtrl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:DataTemplateIssue"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<StackPanel>
<Button x:Name="button1" Content="Button" Click="button1_Click"/>
<Button x:Name="button2" Content="Button" Click="button2_Click"/>
<Button x:Name="button3" Content="Button" Click="button3_Click"/>
</StackPanel>
</UserControl>
后面的代码：
public partial class ThreeBtnUserCtrl : UserControl
{
public ThreeBtnUserCtrl()
{
InitializeComponent();
}
private void button1_Click(object sender, RoutedEventArgs e)
{
//...some code only controlling view related stuff of your UserCtrl
}
private void button2_Click(object sender, RoutedEventArgs e)
{
//...some code only controlling view related stuff of your UserCtrl
}
private void button3_Click(object sender, RoutedEventArgs e)
{
//...some code only controlling view related stuff of your UserCtrl
}
}
在你的 DataTemplate:
中使用它
<DataTemplate x:Key="MyTemplate">
<Grid>
<local:ThreeBtnUserCtrl/>
</Grid>
</DataTemplate>
在堆栈面板中使用行为
<DataTemplate x:Key="GlobalBox">
<Border Background="#FFFFFFFF" Margin="10 0 0 5" CornerRadius="2 2 15 2">
<Grid Width="380">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Tag="{Binding ID}" Name="ProfileInfo" Orientation="Horizontal" Margin="15 15 15 0">
<Grid Width="360" Margin="0 0 0 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="50"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Height="45" Width="45" CornerRadius="5">
<Border.Background>
<ImageBrush ImageSource="{Binding ImagePath}" Stretch="UniformToFill"/>
</Border.Background>
</Border>
<StackPanel Grid.Column="1" Orientation="Vertical" Margin="0 5 0 0">
<TextBlock Text="{Binding Name}" Foreground="Black" FontSize="18" FontWeight="Bold"></TextBlock>
<TextBlock Text="{Binding Handle}" Foreground="DarkGray" FontSize="12"/>
</StackPanel>
<Image Grid.Column="2" Source="Assets/ActionIcons/logo_blue_32.png" Width="32" VerticalAlignment="Top"></Image>
</Grid>
<interact:Interaction.Behaviors>
<interactcore:EventTriggerBehavior EventName="Tapped" >
<interactcore:InvokeCommandAction Command="{Binding Path=DataContext.Btn1Command}" />
</interactcore:EventTriggerBehavior>
</interact:Interaction.Behaviors>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
我有一个 ListView 和 ItemTemplate
<ListView ItemTemplate="{StaticResource MYTEMPLATE}"
HorizontalAlignment="Center"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ContinuumNavigationTransitionInfo.IsEntranceElement="True">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel VerticalAlignment="Bottom"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
模板看起来像这样：
<DataTemplate x:Key="GlobalBox">
<Border Background="#FFFFFFFF" Margin="10 0 0 5" CornerRadius="2 2 15 2">
<Grid Width="380">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Tag="{Binding ID}" Name="ProfileInfo" Tapped="Profile_Tapped" Orientation="Horizontal" Margin="15 15 15 0">
<Grid Width="360" Margin="0 0 0 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="50"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Height="45" Width="45" CornerRadius="5">
<Border.Background>
<ImageBrush ImageSource="{Binding ImagePath}" Stretch="UniformToFill"/>
</Border.Background>
</Border>
<StackPanel Grid.Column="1" Orientation="Vertical" Margin="0 5 0 0">
<TextBlock Text="{Binding Name}" Foreground="Black" FontSize="18" FontWeight="Bold"></TextBlock>
<TextBlock Text="{Binding Handle}" Foreground="DarkGray" FontSize="12"/>
</StackPanel>
<Image Grid.Column="2" Source="Assets/ActionIcons/logo_blue_32.png" Width="32" VerticalAlignment="Top"></Image>
</Grid>
</StackPanel>
<StackPanel Grid.Row="1" Margin="14.5,0,0,0" Height="Auto">
<StackPanel Name="TweetContent" Tag="{Binding ID}" Margin="15 0 15 0" Tapped="Content_Tapped">
<TextBlock Text ="{Binding Content}" TextWrapping="Wrap" Foreground="Black" FontSize="14" Margin="0 0 0 10"/>
<ItemsControl ItemsSource="{Binding ContentImages}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding }" MaxWidth="350" Margin="0 0 0 5" HorizontalAlignment="Center"></Image>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBlock Foreground="DarkGray" Text="{Binding DateSend}" FontSize="10"></TextBlock>
</StackPanel>
<StackPanel Name="ActionButtons">
<Grid Tag="{Binding ID}" Width="380" Height="25" Margin="0 0 0 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" HorizontalAlignment="Center" Margin="20 0 0 0" Style="{StaticResource replyActionButton}" Tapped="Reply_Tapped"></Button>
<ToggleButton Grid.Column="2" HorizontalAlignment="Center"
Style="{StaticResource retweetActionButton}"
Tapped="Retweet_Tapped"></ToggleButton>
<TextBlock Grid.Column="3" HorizontalAlignment="Left" Margin="-15 0 0 0" VerticalAlignment="Center" Text="{Binding RetweetCount}" Foreground="DarkGray"/>
<ToggleButton Grid.Column="4" HorizontalAlignment="Center"
Style="{StaticResource likeActionButton}"
IsChecked="{Binding LikeState}"
Tapped="Favourite_Tapped"></ToggleButton>
<TextBlock Grid.Column="5" HorizontalAlignment="Left" Margin="-15 0 0 0" VerticalAlignment="Center" Text="{Binding LikeCount}" Foreground="DarkGray"/>
</Grid>
</StackPanel>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
现在，当我将模板放入 app.xaml 文件时，出现以下编译错误
无法在应用程序中设置事件 class XAML 文件
这对我来说很有意义，但我该怎么做呢？我可以将变量之类的不同事件传递到数据模板中吗？
//更新 - 使用 USERCONTROL 的解决方案 WAY2：
我用上面的代码制作了一个 UserControl 并在 ListView 中实现了它。
<ListView Grid.Row="1" Margin="0 0 0 5"
x:Name = "standardBox"
HorizontalAlignment="Center"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ContinuumNavigationTransitionInfo.IsEntranceElement="True">
<ListView.ItemTemplate>
<DataTemplate>
<local:UCGlobal></local:UCGlobal>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel VerticalAlignment="Bottom"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
您可以使用 Command 和 EventTrigger 并将其绑定到视图模型的命令。
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tapped">
<i:InvokeCommandAction Command="{Binding TappedCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
或者用小 UserControl 代替 DataTemplate:
<UserControl... >
<StackPanel>
<Button x:Name="button1" Content="Button" Click="button1_Click"/>
</StackPanel>
</UserControl>
并在您的 app.xaml:
中使用它<DataTemplate x:Key="Template">
<Grid>
<local:myUserControl/>
</Grid>
</DataTemplate>
您可以使用一些备选方案：
使用模板中按钮的命令 属性（注意
DataContext设置正确，以避免绑定错误）：<DataTemplate x:Key="MyTemplate"> <StackPanel> <Button x:Name="button1" Content="Button1" Command="{Binding Btn1Command}" CommandParameter="{Binding ElementName=button1}"/> <Button x:Name="button2" Content="Button2" Command="{Binding Btn2Command}" CommandParameter="{Binding ElementName=button2}"/> <Button x:Name="button3" Content="Button3" Command="{Binding Btn3Command}" CommandParameter="{Binding ElementName=button3}"/> </StackPanel> </DataTemplate>
如果是另一种类型的事件不会调用命令，您可以使用 InvokeCommandAction，其处理方式与下一个示例中所示的相同。
使用像
CallMethodAction这样的触发器（同上。DataContext是搜索方法的地方。）：<DataTemplate x:Key="MyTemplate"> <StackPanel> <Button x:Name="button1" Content="Button1" > <i:Interaction.Triggers> <i:EventTrigger EventName="Tapped"> <ei:CallMethodAction MethodName="button1_Tapped"/> </i:EventTrigger> </i:Interaction.Triggers> </Button>...写一个小
UserControl作为你DataTemplate的基础:
XAML:
<UserControl x:Class="ThreeBtnUserCtrl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:DataTemplateIssue"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<StackPanel>
<Button x:Name="button1" Content="Button" Click="button1_Click"/>
<Button x:Name="button2" Content="Button" Click="button2_Click"/>
<Button x:Name="button3" Content="Button" Click="button3_Click"/>
</StackPanel>
</UserControl>
后面的代码：
public partial class ThreeBtnUserCtrl : UserControl
{
public ThreeBtnUserCtrl()
{
InitializeComponent();
}
private void button1_Click(object sender, RoutedEventArgs e)
{
//...some code only controlling view related stuff of your UserCtrl
}
private void button2_Click(object sender, RoutedEventArgs e)
{
//...some code only controlling view related stuff of your UserCtrl
}
private void button3_Click(object sender, RoutedEventArgs e)
{
//...some code only controlling view related stuff of your UserCtrl
}
}
在你的 DataTemplate:
<DataTemplate x:Key="MyTemplate">
<Grid>
<local:ThreeBtnUserCtrl/>
</Grid>
</DataTemplate>
在堆栈面板中使用行为
<DataTemplate x:Key="GlobalBox">
<Border Background="#FFFFFFFF" Margin="10 0 0 5" CornerRadius="2 2 15 2">
<Grid Width="380">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Tag="{Binding ID}" Name="ProfileInfo" Orientation="Horizontal" Margin="15 15 15 0">
<Grid Width="360" Margin="0 0 0 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="50"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Height="45" Width="45" CornerRadius="5">
<Border.Background>
<ImageBrush ImageSource="{Binding ImagePath}" Stretch="UniformToFill"/>
</Border.Background>
</Border>
<StackPanel Grid.Column="1" Orientation="Vertical" Margin="0 5 0 0">
<TextBlock Text="{Binding Name}" Foreground="Black" FontSize="18" FontWeight="Bold"></TextBlock>
<TextBlock Text="{Binding Handle}" Foreground="DarkGray" FontSize="12"/>
</StackPanel>
<Image Grid.Column="2" Source="Assets/ActionIcons/logo_blue_32.png" Width="32" VerticalAlignment="Top"></Image>
</Grid>
<interact:Interaction.Behaviors>
<interactcore:EventTriggerBehavior EventName="Tapped" >
<interactcore:InvokeCommandAction Command="{Binding Path=DataContext.Btn1Command}" />
</interactcore:EventTriggerBehavior>
</interact:Interaction.Behaviors>
</StackPanel>
</Grid>
</Border>
</DataTemplate>