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.
Related
I have a simple splitview that has a rectangle of width 4px that indicates the selected item in the spiltview.
<Rectangle HorizontalAlignment="Left" VerticalAlignment="Top"
Width="4" Height="48" Margin="1,0"
Fill="{ThemeResource SystemAccentColor}" Grid.Row="2"
Visibility="{x:Bind btnHome.IsChecked, Mode=OneWay}"/>
Right now I've multiple rectangles turned on/off depending whether the checkbox is selected or not! But instead, I want a single rectangle in my code that should transition from the place where it previously was to place where the user has clicked.
Simplest for you would be using the new NavigationView if your minimum version is set to Fall Creators Update or use the HamburgerMenu control from UWP Community Toolkit (note that it's updated to use style very similar to yours, the docs aren't just updated with current screenshots). You can download the UWP Community Toolkit Sample App from Windows Store if you want to see how it currently looks.
If you want to use your custom solution, you should create a custom style or rather edit an existing style of the control you're using as hamburger menu items. Default styles are available for example here.
I'm somewhat new to WPF and .NET in general. I am using the Fluent.Ribbon library to create a ribbon for my application. I am also using the FontAwesome.Wpf library to draw icons on buttons and the like.
I am having trouble getting these to work nicely together, and I think it is due to how Fluent.Ribbon's button works.
If I write:
<Fluent:Button fa:Awesome.Content="Plus"
TextElement.FontFamily="pack://application:,,,/FontAwesome.WPF;component/#FontAwesome"
/>
I get "nothing" -- a blank button is "drawn." If I change it to using the standard WPF Button control, I get a button in the right place, using the right icon, but the style does not fit in with Fluent.Ribbon.
I want to just draw my font awesome icon in a nicely styled ribbon button. What should I do?
This is a little late but maybe interesting for others.
<Fluent:Button Size="Small" >
<Fluent:Button.Icon>
<fa:ImageAwesome Margin="0" Icon="Info" />
</Fluent:Button.Icon>
</Fluent:Button>
Setting the margin Property is only required when using the Icon in ToolBarItems.
I don't know if I'm missing something but I doubt it, and to me it looks more like a bug, but I thought I'd check here first just in case.
This is the code I have:
<Page.BottomAppBar>
<CommandBar x:Name="bottomAppBar"
Background="{ThemeResource SystemControlBackgroundAccentBrush}"
Visibility="Collapsed"
IsOpen="False"
ClosedDisplayMode="Compact"
IsSticky="False">
<AppBarButton x:Name="btnSearch" Label="Search"
Icon="Find" Foreground="White" />
</CommandBar>
</Page.BottomAppBar>
When displayed in portrait mode on my phone, it always shows the command bar and when I rotate my phone (landscape), it hides it ok.
Strangely enough the XAML Editor always shows the command bar, no matter what orientation the editor is set to.
This problem occurs on both the emulator and the actual phone.
I haven't tried it via code-behind yet as I'm using MVVM and I'd like to bind a property to the Visibility or the IsOpen properties but will try it later and if required, I will but hopefully, it won't come down to this.
Any ideas?
Thanks.
Thierry
I tested this code in the Windows 10 Mobile emulator build 10586. The command bar is not display in portrait and landscape.
I'm creating this test Metro application using Windows 8, VS2012, C# and XAML. There are different TextBox in the application page arranged in a StackPanel. When the application is launched the focus is on the first TextBox.
I was wondering how to "deactivate" this.
Here's a pic, as you can see the first field is focused (color changed and ToolTip displayed).
When your UI is loaded you can remove focus from the TextBox by applying a Programmatic focus state to any other control.
Imagine that you have a Button named myButton. You can:
myButton.Focus(FocusState.Programmatic);
You cannot however use FocusState.Unfocused state to remove focus from the TextBlock because it is not allowed and will throw an exception.
One simple fix for this is place something to catch it first with IsTabStop="True" with a 0 Opacity which is a bit hacky but the only way I know. So something like;
<TextBox IsTabStop="True" Opacity="0" Height="1" Width="1"/>
<!-- Then the rest of your content like your other TextBox stuff -->
I have searched for other answers, but none are clear enough.
I have a problem where whenever I click on a textbox that I set the InputScope to "number", the number pad comes up but the box I was typing in disappears..
Here is a screenshot and my code.
(I am also overriding the light/dark theme on windows phone to do it)
<TextBox InputScope="Number" Height="72" HorizontalAlignment="Left"
Margin="159,190,0,0" Name="aTextBox" VerticalAlignment="Top" Width="227"
TextChanged="aTextBox_TextChanged" Foreground="Black" BorderThickness="0"
Background="White" />
Your problem appears to be that there is a different visual state for when the TextBox has input focus, which matches the phone theme you're trying to override. If you want to fight against the system theme, you'll need to retemplate the TextBox.
In Blend, in the Objects and Timeline window, right-click on the TextBox and select Edit Template | Edit a Copy...
In the dialog that appears, name your new style / template and where you want to create it in the XAML. Click OK.
You are now in template edit mode. (If you want to exit this mode, click the Return scope button at the top of the Objects and Timeline window)
Click on the States tab (or go to Window | States if not visible) and you can see all the different visual states for each mode of the TextBox (focused, unfocused, etc). As you click on each one, you'll see the TextBox in the designer change. Select each state and change the colors to what you want them to be.
Specifically, note how in the Focused state, the TextBox background becomes transparent by default. This is your issue. Change it to what you want it to be.
Finally, I want to recommend that you don't try to override the Light / Dark theme on Windows Phone, unless you are replacing it outright with your own branding / color scheme. It's a lot of work and it could annoy and confuse users who are used to seeing the theme they have chosen.
Good luck!
Try like this:
<TextBox Text="NumericTextBox">
<TextBox.InputScope>
<InputScope>
<InputScopeName NameValue="Number" />
</InputScope>
</TextBox.InputScope>