Binding fails when moved into a flyout - binding

Question

I have a slider bound to the volume property of a MediaElement. This works if marked up as below:
<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>
But when I put the slider into the Flyout the Binding no longer works.
<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>
There are no errors and I cant do a Binding trace because the TraceListeners have been removed from WinRt. I have tried:
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();
}
But no errors are thrown and there is nothing in the output window. In design mode, using the Properties Windows, if i change the volume value of the videoMediaElement then the Value property of the Slider changes but I cant update the Value of the slider, it's read only.
I can make it work within the flyout if I use code:
private void RangeBase_OnValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
var slider = sender as Slider;
videoMediaElement.Volume = slider.Value;
}
but then why bother with bindings at all?

Answer 1

I had this kind of errors some times now, I think that Flyouts are handled separately where the Bindings can't look for the ElementName.
I suggest that you should do this with a ViewModel, instead of cross binding in your Page
Slider.Value [TwoWay-Bind] -> ViewModel.Volume
ViewModel.Volume -> videoMediaElement.Volume