0

I currently have the following xaml code to display a list of channels on the left of my interface when a button is clicked:

    <Button Content="Channels" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="109">
        <Button.Flyout>
            <Flyout Placement="Left">
                <Grid>
                    <TextBlock Text="Channels" 
                               FontSize="45.333" FontFamily="Segoe WP Light"
                               TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Height="48" Width="200" FontWeight="Light" OpticalMarginAlignment="TrimSideBearings" TextReadingOrder="DetectFromContent"/>
                    <ScrollViewer Margin="0,53,0,54" ZoomMode="Disabled">
                        <ListView Margin ="10,0" ItemsSource="{Binding Channels}" Width="189" ItemTemplate="{StaticResource ChannelTemplate}" x:Name="channelListView" IsTapEnabled="False" IsRightTapEnabled="False" IsHoldingEnabled="False" IsDoubleTapEnabled="False" Height="715"/>
                    </ScrollViewer>
                </Grid>
                <Flyout.FlyoutPresenterStyle>
                    <Style TargetType="FlyoutPresenter">
                        <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
                        <Setter Property="MaxWidth" Value="200"/>
                    </Style>
                </Flyout.FlyoutPresenterStyle>
            </Flyout>
        </Button.Flyout>
    </Button>

Here's a screenshot:

Screenshot of channels list

However, When trying to use similar code for a list of users on the right of the interface, the users list does not appear on the right - it is on the left instead:

    <Button Content="Users" Margin="281,0,10,0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="58">
        <Button.Flyout>
            <Flyout Placement="Right">
                <Grid>
                    <TextBlock Text="Users" 
                               FontSize="45.333" FontFamily="Segoe WP Light"
                               TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Height="48" Width="200" FontWeight="Light" OpticalMarginAlignment="TrimSideBearings" TextReadingOrder="DetectFromContent"/>
                    <ScrollViewer Margin="0,53,0,54" ZoomMode="Disabled">
                        <ListView Margin ="10,0" ItemsSource="{Binding Channels}" Width="189" ItemTemplate="{StaticResource ChannelTemplate}" x:Name="usersListView" IsTapEnabled="False" IsRightTapEnabled="False" IsHoldingEnabled="False" IsDoubleTapEnabled="False" Height="715"/>
                    </ScrollViewer>
                </Grid>
                <Flyout.FlyoutPresenterStyle>
                    <Style TargetType="FlyoutPresenter">
                        <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
                        <Setter Property="MaxWidth" Value="200"/>
                    </Style>
                </Flyout.FlyoutPresenterStyle>
            </Flyout>
        </Button.Flyout>
    </Button>

A screenshot of the users list

enter image description here

Is there something I need to do other than <Flyout Placement="Right">? If so, what?

rymate1234
  • 448
  • 4
  • 16
  • It's kinda hard to parse XAML just by reading it. Mind posting a screenshot? – Fred Mar 09 '15 at 12:08
  • Isn't that space [reserved](https://msdn.microsoft.com/en-us/library/windows/apps/hh770544.aspx) for a [SettingsFlyout](https://msdn.microsoft.com/library/windows/apps/dn252814) aka Charms bar thingy? – Chris W. Mar 09 '15 at 18:50
  • @ChrisW. I don't think so, as the default behavior of a SettingsFlyout on a phone appears to be that it takes up the whole screen, rather than a sidebar on the right like on a windows tablet / desktop – rymate1234 Mar 09 '15 at 19:28

0 Answers0