I have a very specific question. I could not find any answers for this exact problem, so I used the trial and error method to pinpoint the problem. Here is an example code I have the problem with:
<Page.BottomAppBar>
<CommandBar x:Name="MainMenuCommandBar" ClosedDisplayMode="Minimal">
<CommandBar.PrimaryCommands>
<AppBarButton x:Name="otherCommandButton" Label="Egyéb" Icon="List" Click="otherCommandButton_Click" Style="{StaticResource appbarButton}">
<AppBarButton.Flyout>
<MenuFlyout>
<MenuFlyoutItem x:Name="SecondaryFlyout1" Text="Névjegy" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
<MenuFlyoutItem x:Name="SecondaryFlyout2" Text="Adatbázis mentés" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
<MenuFlyoutItem x:Name="SecondaryFlyout3" Text="Adatbázis visszaállítás" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
<MenuFlyoutItem x:Name="SecondaryFlyout4" Text="Terminál törlése" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
<MenuFlyoutItem x:Name="SecondaryFlyout5" Text="Jelszavas védelem" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
<MenuFlyoutItem x:Name="SecondaryFlyout6" Text="Nyelv váltás" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
<MenuFlyoutItem x:Name="SecondaryFlyout7" Text="Betűméret" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
<MenuFlyoutItem x:Name="SecondaryFlyout8" Text="Kilépés" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
</MenuFlyout>
</AppBarButton.Flyout>
</AppBarButton>
<AppBarButton x:Name="refreshCommandButton" Label="Frissítés(Bank)" Icon="Refresh" Style="{StaticResource appbarButton}"/>
<AppBarButton x:Name="syncCommandButton" Label="Szinkronizál(PC)" Icon="Sync" Style="{StaticResource appbarButton}"/>
</CommandBar.PrimaryCommands>
</CommandBar>
</Page.BottomAppBar>
I wanted to apply a custom style for the appbarbuttons inside a commandbar, because the text in the Labels are too long, and I can't see the whole text. So I thought, I will make the text smaller, or the appbarbutton wider. The designer showed me the changes, but when I run the program, nothing changes. The appbarbuttons use the default styling, no matter what I do. So the text don't get smaller when I run the program.
After this, I tried to pinpoint the problem. I tried to edit the template too, but the "edit a copy" command is grayed out. I thought this is weird, because I sweeped through MSDN, and there I saw that the appbarbuttons in fact has a style which I could edit. I copied the default style, made changes, applied it into my app.xaml as a custom style, but I met with the same problem as before. Nothing changed, no matter what I altered in the style. After all these failures, I put an appbarbutton OUTSIDE a commandbar. And at this case, everything works fine. I can edit a copy of the template, and the changes reflect when I run the program. Another weird case is, that the menuflyoutitems can be styled inside the commandbar.
Sorry for the lengthy explanations, I wanted to present what I know already. My question in short that, is there any way to style an appbarbutton inside a commandbar? Or if not, is there any alternative to create a custom commandbar?
The CommandBar on Windows Phone is system UI and cannot be customized by the app beyond setting it's foreground and background colors.
If you want to customize the individual buttons you'll need to implement your own panel for them instead of using the app bar. You can place a horizontal Stack Panel at the bottom of your page and include customized AppBarButtons in it. If you want it to shoe and hide you will need to set your own logic to detect the triggering input and then apply an animation to side it open and closed.
Related
I have an old WPF application with needs and accessibility features. The application uses radio buttons to construct a menu with a popup.
The problem is the user doesn't want the narrator to say "radio button" when it's clicked. I am using AutomationProperties.HelpText and AutomationProperties.Name to adjust the text for the controls. I have no idea how to change the "ControlType" the narrator reads out when the control is in focus.
<RadioButton
AutomationProperties.AcceleratorKey="1"
AutomationProperties.AccessKey="3"
AutomationProperties.AutomationId="2"
AutomationProperties.HelpText="Taufiq"
AutomationProperties.ItemStatus="Test"
AutomationProperties.ItemType="Text"
AutomationProperties.Name="Take Snapshot"
Command="{Binding TakeSnapshotCommand}">
<StackPanel Orientation="Horizontal">
<ContentControl Content="{DynamicResource GalleryIcon}" Focusable="False" />
<TextBlock Text="Take Snapshot" />
</StackPanel>
</RadioButton>
None of the properties of the AutomationProperties works.
My understanding is that narrator will read the advertised type so that someone relying on the screen reader knows how to interact with the focussed item.
If you really need to control how this works, you'll need to subclass RadioButton and override OnCreateAutomationPeer to create your own peer which can then gain quite a bit of control.
Since applying the Windows 10 Anniversary Edition along with the SDK, one of the Command Bars has different behavior. It used to display three AppButtons. Now, only two will display. There appears to be an empty button on the far left.
Here is the XAML:
<CommandBar x:Name="VideoGroupCommands"
RelativePanel.AlignBottomWithPanel="True"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
Background="{StaticResource LightBeigeBrush}"
IsEnabled="{x:Bind ViewModel.IsVideoGroupSelected,Mode=TwoWay}">
<AppBarButton Icon="Edit"
x:Uid="Edit"
Label=""
Command="{x:Bind ViewModel.EditVideoGroupCommand}"/>
<AppBarButton Icon="Delete"
x:Uid="Delete"
Label=""
Command="{x:Bind ViewModel.DeleteGroupCommand}"/>
<AppBarButton Icon="MoveToFolder" x:Uid="Merge" Label=""/>
</CommandBar>
How do I eliminate the gap on the left?
I believe the update changed the display mechanics, slightly, for the command bar. To fix this, I changed the grid column the control is in from a FIXED width to an AUTO width. Now, the control displays all three buttons with no gap on the left. The column is a little wider, but I can absorb it.
In the picture above, the command bar was cutting the third button out of the display.
In the Internet Explorer App, there is a little bar on the bottom that is used to open the app/command bar.
It also shows up in the mail app:
I have just a simple CommandBar at the moment, which is completely hidden until the user right-clicks or swipes from the bottom:
<Page.BottomAppBar>
<CommandBar>
<AppBarButton x:Name="Button_Save" Icon="Save" Label="Save" Click="Button_Save_Click"/>
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Crop" Label="Canvas Size"></AppBarButton>
<AppBarButton Label="Grid Size" Icon="ViewAll"></AppBarButton>
</CommandBar.SecondaryCommands>
</CommandBar>
</Page.BottomAppBar>
Rather than just creating my own control, it would be nice if there was one that already existed for me to use. I don't know the name of this "Command bar grip" so I cant seem to find much information on it. If it does exist, what's the name of it? And if not, any ideas on how to make one? I would probably just use a rectangle and add the little "..." on the side.
I have seen it in some apps apart from Microsoft, but there appears to be no information on the control.
There isn't a standard control for this. The in-box AppBar on Windows 8.1 either hides or shows and doesn't have an intermediate hint mode.
You can implement it yourself by creating a panel at the bottom of the page animating its position so it is either fully visible or shows only the ellipses. This can be done fairly easily by setting visual states for the visible and hinting states and switching to the visible state when the control receives focus or pointer input. As Robert Hartley suggests, the ellipses can be found in the Segoe UI Symbol font at 0xE10C ("More")
<TextBlock Text="" HorizontalAlignment="Right" VerticalAlignment="Top" FontFamily="Segoe UI Symbol"/>
I haven't used it, but Dave Smits provided a sample AppBarHint control which implements a hinting app bar for Windows. You might want to take a look at how he did that too.
I'm trying to show a simple Flyout (with informational content) when a AppBarToggleButton within BottomAppBar is pressed, but my solution doesn't work. :(
This is my code:
<Page.BottomAppBar>
<CommandBar>
<AppBarToggleButton x:Uid="MapPageAppBarLegend" Label="" Icon="List">
<FlyoutBase.AttachedFlyout>
<Flyout>
<TextBlock Text="Informations here..."/>
</Flyout>
</FlyoutBase.AttachedFlyout>
</AppBarToggleButton>
</CommandBar>
</Page.BottomAppBar>
Nothing appears.. Can anyone help me to showing this flayout?
Thank you very much and sorry for my english language. :)
Pame
Everything is quite clearly described at MSDN (there is also a very good example there):
Nothing appears, because Flyouts open automatically only for buttons (and AppBarToggleButton doesn't derive from Button class):
A flyout attached to a button opens automatically when the user clicks the button. You don't need to handle any events to open the flyout. (This includes controls derived from Button, like AppBarButton
Of course you can add a Flyout to any FrameworkElement but you will have to open it manually:
You can attach a Flyout control to any FrameworkElement object by using the FlyoutBase.AttachedFlyout attached property. If you do so, you must respond to an interaction on the FrameworkElement, such as the Tapped event, and open the Flyout in your code.
In XAML - define your Flyout in Resources and attach it to button:
<Page.Resources>
<Flyout x:Key="myFlyout" Placement="Top">
<TextBlock Text="Informations here..."/>
</Flyout>
</Page.Resources>
<Page.BottomAppBar>
<CommandBar>
<AppBarToggleButton x:Uid="MapPageAppBarLegend" Label="First" Icon="List"
FlyoutBase.AttachedFlyout="{StaticResource myFlyout}"
Click="AppBarToggleButton_Click"/>
</CommandBar>
</Page.BottomAppBar>
And event in code behind:
private void AppBarToggleButton_Click(object sender, RoutedEventArgs e)
{
FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}
I have a situation here. I have a page containing a ListBox. The ListBox is populated with Items if it is able to fetch the data from a web service. Now when the user doesn't have network connectivity on his phone or the webservice doesn't respond back with Ok status, I want to show the user a pop-up with an option to Retry or select Ok to stay on the same page (though it sounds dumb). Now for this I used a Canvas:
<Canvas Name="Nonetwork" Height="150" Width="280" HorizontalAlignment="Center" VerticalAlignment="Center" Background="DodgerBlue" Visibility="Collapsed" Margin="111,160,92,160" >
<TextBlock VerticalAlignment="Top" Height="120" Width="280" Text="No Network is currently availabe" TextAlignment="Center" TextWrapping="Wrap" Foreground="White" FontSize="28" />
<Button Margin="30, 80" Height="60" Width="100" Content="OK" FontSize="18" Click="Ok_Click"/>
<Button Margin="150, 80" Height="60" Width="100" Content="Retry" FontSize="18" Click="Retry_Click"/>
</Canvas>
Well as most of you experienced guys would have guessed, the canvas is buried inside the listbox and is not accessible when there is no network connectivity. So I have a blank page with the canvas but the user is not able to click on Ok or Retry. Please help
Please do let me know if there is any other approach to solve this problem. I tried Popup but I cant Navigate to the main page from a pop-up since that is a user control page. Any help is higly appreciated
Well, I placed my Canvas below the ListBox and the problem was solved. I didn't know that positioning of the controls in the XAML would have so much effect ...
The order in which elements are rendered in Silverlight is determined firstly by where they appear in the visual object hierarchy and secondly by their ZIndex property.
The Canvas has a third attached property named ZIndex that you can use to override the default layering of elements. Although this Canvas.ZIndex attached property is defined by the Canvas class, it actually works with any type of panel.
You can also try Canvas.ZIndex property:
Canvas.ZIndex Attached Property
What you do is a wrong practice and not at all recommended.
ChildWindow is the class you should use to display such kind of dialog.
Using a Popup is also another approach you can use.
NOTE: I know the simplest approach would be to use MessageBox.Show(), but it would create a popup out of silverlight frame and does not allow theming/styling and other customizations.