移入 Flyout 后绑定失败

Question

我有一个滑块绑定到MediaElement的音量属性。如果按照以下方式标记，则有效：

<UserControl
    x:Class="GenTest.VideoElement"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GenTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="600">
    <UserControl.Resources>
        <Style x:Name="transportStyle"  TargetType="Button">
            <Setter Property="Height" Value="40" />
            <Setter Property="Width" Value="75" />
            <Setter Property="FontSize" Value="11" />
        </Style>
        <Style x:Name="atransportStyle"  TargetType="AppBarButton">
            <Setter Property="IsCompact" Value="true" />
            <Setter Property="FontSize" Value="11" />
        </Style>
    </UserControl.Resources>
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="100"/>
        </Grid.RowDefinitions>

        <ContentControl x:Name="videoContainer" 
                            KeyUp="VideoContainer_KeyUp" 
                            HorizontalContentAlignment="Center" 
                            VerticalContentAlignment="Center" 
                            Height="400" Grid.Row="0" >
            <MediaElement Name="videoMediaElement"
                              MediaOpened="videoElement_MediaOpened" 
                              MediaEnded="videoMediaElement_MediaEnded" 
                              MediaFailed="videoMediaElement_MediaFailed"
                              CurrentStateChanged="videoMediaElement_CurrentStateChanged"
                              AutoPlay="False" />
        </ContentControl>
        <!-- Transport Controls -->
        <StackPanel Name="TransportControlsPanel" 
                    HorizontalAlignment="Center" 
                    Grid.Row="1" >
            <Slider Name="timelineSlider" Margin="0,0" Width="500" Height="37"/>
            <StackPanel Orientation="Horizontal">
                <AppBarButton x:Name="btnPlay" Icon="Play" Click="btnPlay_Click" Style="{StaticResource atransportStyle}" Label="Play"/>
                <AppBarButton x:Name="btnStop" Icon="Stop" Click="btnStop_Click" Style="{StaticResource atransportStyle}"/>
                <AppBarButton x:Name="btnReverse" Icon="Previous" Click="btnReverse_Click" Style="{StaticResource atransportStyle}"/>
                <AppBarButton x:Name="btnForward" Icon="Next" Click="btnForward_Click" Style="{StaticResource atransportStyle}"/>


                 <Button Name="btnFullScreenToggle" Click="btnFullScreenToggle_Click" 
                        Style="{StaticResource transportStyle}" Content="Full" />
                <ComboBox Name="cbAudioTracks"
                          SelectionChanged="cbAudioTracks_SelectionChanged" 
                          Width="75" />
                <AppBarButton x:Name="btnTest" Icon="Other" Style="{StaticResource atransportStyle}">
                    <AppBarButton.Flyout>
                        <Flyout>
                            <StackPanel Orientation="Vertical">

                            </StackPanel>
                        </Flyout>
                    </AppBarButton.Flyout>
                </AppBarButton>
                <Slider Minimum="0" Maximum="1"  StepFrequency="0.1" Height="100" Value="{Binding Mode=TwoWay, 
                    ElementName=videoMediaElement, Path=Volume}" Orientation="Vertical"/>
             </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>

但是当我把滑块放到Flyout中时，绑定就不再起作用了。

<AppBarButton x:Name="btnTest" Icon="Other" Style="{StaticResource atransportStyle}">
                    <AppBarButton.Flyout>
                        <Flyout>
                            <StackPanel Orientation="Vertical">
                                <Slider Minimum="0" Maximum="1"  StepFrequency="0.1" Height="100" Value="{Binding Mode=TwoWay, 
                    ElementName=videoMediaElement, Path=Volume}" Orientation="Vertical"/>
                            </StackPanel>
                        </Flyout>
                    </AppBarButton.Flyout>
                </AppBarButton>

没有出现错误，但是我无法进行绑定跟踪，因为WinRt中的TraceListeners已被移除。我已尝试：

public App()
{
    this.InitializeComponent();
    this.Suspending += OnSuspending;
    this.UnhandledException += App_UnhandledException;
    DebugSettings.BindingFailed += OnDebugSettingsOnBindingFailed;
}

private void OnDebugSettingsOnBindingFailed(object sender, BindingFailedEventArgs args)
{
    new MessageDialog(args.Message).ShowAsync();
}

但是没有任何错误提示，输出窗口也没有任何信息。在设计模式下，使用属性窗口，如果我更改videoMediaElement的音量值，则Slider的Value属性会更改，但我无法更新Slider的Value，它是只读的。

如果我使用代码，在flyout中可以使其工作：

private void RangeBase_OnValueChanged(object sender, RangeBaseValueChangedEventArgs e)
    {
        var slider = sender as Slider;
        videoMediaElement.Volume = slider.Value; 
    }

但是为什么还要使用绑定呢？

- rism

Answer 1

我已经多次遇到这种错误，我认为Flyouts是单独处理的，绑定无法查找ElementName。

我建议你应该使用ViewModel来处理，而不是在页面中进行跨绑定。

Slider.Value [双向绑定] -> ViewModel.Volume ViewModel.Volume -> videoMediaElement.Volume

- CodeNoob

---

最终我想知道元素名称绑定失败的原因，而不是另一种变通方法。话虽如此，你的方法比我的好，所以点个赞。至于是否接受你的答案，我会让 @markwilde 决定，毕竟他提供了悬赏。 - rism