CODEWITHSUNDEEP
c#wpfxamlwindows-phone-8.1
Spook
Spook

Reputation: 25927

Problems with flyout over itemscontrol in Windows Phone 8.1

I've got the following piece of XAML code:

    <Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">
        <ScrollViewer>
            <ItemsControl ItemsSource="{Binding History}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical" Tapped="HistoryItemTapped">
                            <FlyoutBase.AttachedFlyout>
                                <Flyout>
                                    <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                        <ScrollViewer>
                                            <TextBlock Foreground="{ThemeResource PhoneMidBrush}" FontSize="{ThemeResource TextStyleExtraLargeFontSize}" HorizontalAlignment="Left" Text="{Binding Expression}" />
                                        </ScrollViewer>
                                        <ScrollViewer>
                                            <TextBlock FontSize="{ThemeResource TextStyleExtraLargePlusFontSize}" HorizontalAlignment="Right" Text="{Binding Result}" />
                                        </ScrollViewer>
                                    </StackPanel>
                                </Flyout>
                            </FlyoutBase.AttachedFlyout>
                            <TextBlock Foreground="{ThemeResource PhoneMidBrush}" FontSize="{ThemeResource TextStyleExtraLargeFontSize}" HorizontalAlignment="Left" Text="{Binding Expression}" 
                                       TextTrimming="CharacterEllipsis"/>
                            <TextBlock FontSize="{ThemeResource TextStyleExtraLargePlusFontSize}" HorizontalAlignment="Right" Text="{Binding Result}" 
                                       TextTrimming="CharacterEllipsis"/>
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </Grid>

There are two problems I can't solve:

  1. The flyout is shown upon tapping on one of items:

    private void HistoryItemTapped(object sender, TappedRoutedEventArgs e)
{
    FlyoutBase.GetAttachedFlyout((FrameworkElement)sender).ShowAt((FrameworkElement)sender);
}

    However, no matter how I set up the flyout it always shows on the top of the screen, not over the tapped item. Why?

  2. The flyout contains two TextBlocks on separate ScrollViewers. The text on one of them exceeds width of the flyout, bt the scrollviewer does not appear to be working (I cannot scroll horizontally the textblock). Why is that?

Upvotes: 0

Views: 453

Answers (1)

Chris W.
Chris W.

Reputation: 23280

So let's knock these out real quick. Your #1 would be expected result, it's just going off the default FlyoutPlacementMode enumeration wherein generally your flyout is just meant to appear over the top in one of 5 spots, Top, Bottom, Left, Right, or Full(Center)

How to fix it, ditch the flyout control and just animate your own panel to do the same thing on a tap event or whatever, not hard at all.

Your #2, if I remember right the default on ScrollViewerfor something like the HorizontalScrollBarVisibility is False by default. So just add HorizontalScrollBarVisibility="Auto" to it.

Hope this helps, cheers

Upvotes: 1

Related Questions