单击列表视图项关闭 UWP 浮出控件答案

【问题标题】：Close UWP flyout with listview item click单击列表视图项关闭 UWP 浮出控件
【发布时间】：2016-06-07 16:06:05
【问题描述】：

我正在尝试关闭列表视图项单击时的浮出控件。问题是在运行时，CallMethodAction 找不到弹出菜单的隐藏方法。我该如何解决这个问题？

    <Flyout x:Name="UnitFlyout">
        <ListView x:Name="ArmyUnitListView" ItemsSource="{Binding Source={StaticResource ArmyUnitCollection}}" SelectionMode="Single"  >
             <ListView.GroupStyle>
                    <GroupStyle HidesIfEmpty="True" HeaderTemplate="{StaticResource ArmyListDataGroupTemplate}" />
              </ListView.GroupStyle>
            <ListView.ItemContainerStyle>
                 <Style TargetType="ListViewItem">
                      <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                 </Style>
               </ListView.ItemContainerStyle>
               <interactivity:Interaction.Behaviors>
                     <core:EventTriggerBehavior EventName="SelectionChanged">
                           <core:InvokeCommandAction Command="{Binding AddUnitCommand}" CommandParameter="{Binding SelectedItem, ElementName=ArmyUnitListView}" />
                            <core:CallMethodAction TargetObject="UnitFlyout" MethodName="Hide"/>
                      </core:EventTriggerBehavior>
                </interactivity:Interaction.Behaviors>
         </ListView>
    </Flyout>

【问题讨论】：

我猜应该是TargetObject="{Binding ElementName=UnitFlyout}"
现在它不会崩溃但它仍然无法工作:(
参考这个链接。希望它能解决您的问题stackoverflow.com/questions/24066687/…

标签： xaml uwp

【解决方案1】：

我做了一个demo，重现了这个问题。原因在于ElementName绑定到popups。

ElementName 绑定在 Flyout 和其他弹出窗口中不起作用

请参阅this Case。

我找到了blog，它提供了解决此问题的解决方法。而且我已经通过演示进行了尝试，效果很好。

在您的情况下，您可以将FlyoutHelpers（在博客中）类复制到您的项目中；并将 IsFlyoutOpen 和 SendCommand 添加到您的 ViewModel 中，如下所示：

public class MainPageViewModel : ViewModelBase
{
    public RelayCommand SendCommand { get; set; }// bind this to your xaml

    public List<String> MyData { get; set; }

    private bool isFlyoutOpen;
    public bool IsFlyoutOpen// bind this to your xaml
    {
        get { return isFlyoutOpen; }
        set { this.Set(() => IsFlyoutOpen, ref isFlyoutOpen, value); }
    }

    public MainPageViewModel()
    {
        SendCommand = new RelayCommand(() =>
        {
            // Doing processing...
            IsFlyoutOpen = false;
        });
        MyData = new List<string> { "winffee", "123", "this Data" };//this is sample data
    }
}

并将命令和属性绑定到您的 xaml：

<Flyout x:Name="UnitFlyout" 
        local:FlyoutHelpers.Parent="{Binding ElementName=myBtn}" 
        local:FlyoutHelpers.IsOpen="{Binding IsFlyoutOpen,Mode=TwoWay}">
    <ListView x:Name="ArmyUnitListView"  SelectionMode="Single" ItemsSource="{Binding MyData}">
         <ListView.ItemContainerStyle>
             <Style TargetType="ListViewItem">
                  <Setter Property="HorizontalContentAlignment" Value="Stretch" />
             </Style>
    </ListView.ItemContainerStyle>
            <interactivity:Interaction.Behaviors>
                <core:EventTriggerBehavior EventName="SelectionChanged" SourceObject="{Binding ElementName=ArmyUnitListView}">
            <!--<core:InvokeCommandAction Command="{Binding AddUnitCommand}" CommandParameter="{Binding SelectedItem, ElementName=ArmyUnitListView}" />-->
                <core:InvokeCommandAction Command="{Binding SendCommand}" />
                </core:EventTriggerBehavior>
            </interactivity:Interaction.Behaviors>
     </ListView>
</Flyout>

这是我的整个演示：FlyoutSample

【讨论】：