CODEWITHSUNDEEP
wpfxamllistviewwindows-store-appswindows-8.1
leepfrog
leepfrog

Reputation: 381

Attach Flyout to Listview

I have a Listview defined like this:

<ListView x:Name="lvPlaylist" Width="530" Height="337" IsItemClickEnabled="True" ItemClick="gvPlaylist_ItemClick">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Image Stretch="Fill" Source="{Binding albumArtURI}"  Height="48" Width="48" />
                <TextBlock Text="{Binding GetPlaylistFormat}" Width="500" Height="18"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

I want to open a "context"-Flyout on each Item on click. So far I was only able to attach the flyout to the whole but then the flyout is shown at the border of the listview - not directly attached to the selected item.

Upvotes: 0

Views: 2580

Answers (2)

David Hayes
David Hayes

Reputation: 7512

Looks like you can also do it like this

From MSDN

"The next example shows a Flyout attached to a TextBlock. As noted earlier, you can attach a Flyout to any FrameworkElement by using the FlyoutBase.AttachedFlyout attached property."

<TextBlock Text="{Binding ElementName=MyTextBox, Path=Text}"
           Tapped="TextBlock_Tapped" FontSize="18">
    <FlyoutBase.AttachedFlyout>
        <Flyout>
            <TextBox x:Name="MyTextBox" Text="You can edit this text by tapping it."/>
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</TextBlock>

Upvotes: 3

Nate Diamond
Nate Diamond

Reputation: 5575

Buttons have a Flyout property. All you have to do is wrap the contents of the template in a Button, create a Style for the button which removes all visuals for it, then create a Flyout for it.

<DataTemplate>
    <Button Style="{StaticResource ButtonWrapperStyle}">
        <Button.Content>
            <Grid>
                <Image Stretch="Fill" Source="{Binding albumArtURI}"  Height="48" Width="48" />
                <TextBlock Text="{Binding GetPlaylistFormat}" Width="500" Height="18"/>
            </Grid>
        </Button.Content>
        <Button.Flyout>
        <!-- Make Flyout Here -->
        </Button.Flyout>
    </Button>
</DataTemplate>

Obviously there is stuff left to do here, but you get the idea.

Hope this helps and happy coding!

Upvotes: 3

Related Questions