locked
Global App bar contains a button flyout

    Question

  • Hey Guys

    I am doing a wp8.1 runtime app. I am having a bottom appbar contains a button "Scandevices" which has a flyout contains a listview where display all available devices. Is that possible to make the whole appbar global use? 

        <!--<Page.BottomAppBar>
            <CommandBar Background="#FF939597" Opacity="0.7" ClosedDisplayMode="Compact">
                --><!--<AppBarButton x:Name="ScanDevices" Label="Scan" Icon="Refresh" Click="ScanDevice_Clicked" >
                    <Button.Flyout>
                        <Flyout>
                        --><!--<uc:ToolboxAppBarWithFlyout/>-->
                        <!--<TextBlock>Hello</TextBlock>--><!--
                        </Flyout>
                    </Button.Flyout>
                    --><!--<Button.Flyout>
                        <Flyout>
                            <Flyout.FlyoutPresenterStyle >
                                <Style TargetType="FlyoutPresenter">
                                    <Setter Property="ScrollViewer.ZoomMode" Value="Enabled"/>
                                    <Setter Property="Background" Value="White"/>
                                    <Setter Property="BorderBrush" Value="Gray"/>
                                    <Setter Property="BorderThickness" Value="5"/>
                                    <Setter Property="MinHeight" Value="300"/>
                                    <Setter Property="MinWidth" Value="300"/>
                                </Style>
                            </Flyout.FlyoutPresenterStyle>
                            <Grid x:Name="DeviceList">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <TextBlock x:Name="FlyoutHeader" Grid.Row="0" Text="Select device" FontSize="26" Foreground="#FF0A6F9E" FontFamily="Segoe UI" />
                                <ListView x:Name="AvailableDevicesList" 
                                          ItemsSource="{Binding}"
                                          IsItemClickEnabled="True"
                                          Grid.Row="1"
                                          Background="Gray"
                                          >
                                    <ListView.ItemTemplate>
                                        <DataTemplate>
                                            <StackPanel Margin="0,0,0,9.5">
                                                <TextBlock
                                        Text="{Binding CompleteDeviceName}"
                                        TextWrapping="Wrap"
                                        CommonNavigationTransitionInfo.IsStaggerElement="True"
                                        Style="{ThemeResource ListViewItemTextBlockStyle}"
                                        Margin="0,0,19,0"/>
                                                <TextBlock
                                        Text="{Binding DeviceAddress}"
                                        TextWrapping="WrapWholeWords"
                                        CommonNavigationTransitionInfo.IsStaggerElement="True" 
                                        Style="{ThemeResource ListViewItemContentTextBlockStyle}"
                                        Margin="0,0,19,0"/>
                                                <TextBlock
                                        Text="{Binding ConnectionStatus}"
                                        TextWrapping="WrapWholeWords"
                                        CommonNavigationTransitionInfo.IsStaggerElement="True" 
                                        Style="{ThemeResource ListViewItemContentTextBlockStyle}"
                                        Margin="0,0,19,0"/>
                                            </StackPanel>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>
                            </Grid>
                        </Flyout>
                    </Button.Flyout>--><!--
                </AppBarButton>--><!--
                <CommandBar.SecondaryCommands>
                    <AppBarButton Label="About" Icon="Help" Click="About_Clicked"/>
                </CommandBar.SecondaryCommands>
            </CommandBar>
        </Page.BottomAppBar>-->

    As you can see, I have tried to make this flyout as a usercontrol, but i dont know how to refresh the listview in host page at runtime.

    Thanks 


    Jiajun Qiu

    Tuesday, October 21, 2014 9:46 AM

Answers

  • What do you mean by send message back from appbarControl?

    As you can see from the link I shared with you, you have to set a AppBar manually and assign the UserControl as its child, it is unlike what you mentioned here reference to another page's appbar. See the key codes below:

            AppBar navBar = new AppBar();
            navBar.Background = new SolidColorBrush(new Color() { A=255, R = 0, G = 178, B = 240 }); 
            navBar.Content = new NavigationControl();
            this.TopAppBar = navBar;

    You could handle all the message in the UserControl instead of Appbar.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, October 24, 2014 8:09 AM
    Moderator

All replies

  • Hi Jiajun Qiu,

    I think you may interested with this: How to share an app bar across pages

    As you can see, I have tried to make this flyout as a usercontrol, but i dont know how to refresh the listview in host page at runtime.

    ->I think your ListView is binding to the data source, once you change the data source, the listview will automatically refresh.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, October 22, 2014 3:38 AM
    Moderator
  • Thanks for the answer

    I have put the whole appbarbuttom into a page(ToolboxDeviceSelectionControlPage) so I can assign this appbarcontrol like this in other pages if I need, now it becomes reusable.

    this.BottomAppBar = new ToolboxDeviceSelectionControlPage().BottomAppBar;

    The new problem is How can I send message back from this assigned appbarcontrol?

    tried Frame.Navigate back but this throw out an error Object reference not set to an instance of an object.

    I dont know why, but I dont think this is a correct way to navigate back either, since the previous page is already running a instance, I dont know if the Navigate function is to create new instance or find the old one?

     


    Jiajun Qiu

    Wednesday, October 22, 2014 12:35 PM
  • What do you mean by send message back from appbarControl?

    As you can see from the link I shared with you, you have to set a AppBar manually and assign the UserControl as its child, it is unlike what you mentioned here reference to another page's appbar. See the key codes below:

            AppBar navBar = new AppBar();
            navBar.Background = new SolidColorBrush(new Color() { A=255, R = 0, G = 178, B = 240 }); 
            navBar.Content = new NavigationControl();
            this.TopAppBar = navBar;

    You could handle all the message in the UserControl instead of Appbar.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, October 24, 2014 8:09 AM
    Moderator