簡體   English   中英

XAML外包數據模板,其中包含APP.xaml中的事件

[英]XAML outsourcing datatemplate with events in APP.xaml

我在使用ItemTemplateListView有一個有效的datatemplate

<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文件中時,出現以下編譯錯誤

無法在Application類XAML文件中設置事件

這對我來說很有意義,但是我該怎么辦呢? 我可以將變量或其他類似事件傳遞到數據模板中嗎?

//更新-解決方法WAY2使用USERCONTROL:

我已經使用上面的代碼制作了一個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>

您可以使用一些替代方法:

  1. 使用模板內部按鈕的命令屬性(請注意,請確保您的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 ,其處理方式與下一個示例所示相同。

  1. 使用類似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>... 
  2. 編寫一個小的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>

您可以使用CommandEventTrigger並將其綁定到View Model的命令。

<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>

在StackPanel中使用行為

<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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM