I have a UWP application, where I want a path to be the content of a button. So far, this is what I have:
<Style TargetType="Button" x:Key="arrow">
<Setter Property="Content">
<Setter.Value>
<Path Height="10" Width="10" Stretch="Uniform" Fill="Black" Data="F1 M 92.362,56.1133C 93.8282,57.8717 92.9765,60.7721 90.4336,60.7721L 80.461,60.7721L 80.461,103.953C 80.461,105.441 79.22,106.682 77.7318,106.682L 55.6016,106.682C 54.1133,106.682 52.8718,105.441 52.8718,103.953L 52.8718,60.7721L 42.8997,60.7721C 40.3575,60.7721 39.5052,57.8717 40.972,56.1133L 64.7376,27.5612C 65.3184,26.8627 66.0052,26.6081 66.6667,26.6536C 67.3282,26.6081 68.0131,26.8627 68.5964,27.5612L 92.362,56.1133 Z M 66.6667,0C 103.484,0 133.333,29.8476 133.333,66.6667C 133.333,103.486 103.484,133.333 66.6667,133.333C 29.8483,133.333 0,103.486 0,66.6667C 0,29.8476 29.8483,0 66.6667,0 Z M 66.6667,122.667C 97.5938,122.667 122.667,97.5938 122.667,66.6667C 122.667,35.739 97.5938,10.6667 66.6667,10.6667C 35.7389,10.6667 10.6667,35.739 10.6667,66.6667C 10.6667,97.5938 35.7389,122.667 66.6667,122.667 Z "/>
</Setter.Value>
</Setter>
</Style>
And the button:
<Button Height="13" Width="13" Style="{StaticResource arrow}">
However, the path doesn't show. Further investigating reveals that the path gets cut off at smaller sizes and works as content on the larger sizes. I suspect it might have to do with some kind of content padding. How do I make the path fill up the button instead of getting cut off?
You have solved it yourself - it's a padding problem (Button has a default one - just change it to 0). I've tried like this and it should work:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<Style TargetType="Button" x:Key="arrow">
<Setter Property="Padding" Value="0"/>
<Setter Property="Content">
<Setter.Value>
<Path Height="10" Width="10" Stretch="Uniform" Fill="Black" Data="F1 M 92.362,56.1133C 93.8282,57.8717 92.9765,60.7721 90.4336,60.7721L 80.461,60.7721L 80.461,103.953C 80.461,105.441 79.22,106.682 77.7318,106.682L 55.6016,106.682C 54.1133,106.682 52.8718,105.441 52.8718,103.953L 52.8718,60.7721L 42.8997,60.7721C 40.3575,60.7721 39.5052,57.8717 40.972,56.1133L 64.7376,27.5612C 65.3184,26.8627 66.0052,26.6081 66.6667,26.6536C 67.3282,26.6081 68.0131,26.8627 68.5964,27.5612L 92.362,56.1133 Z M 66.6667,0C 103.484,0 133.333,29.8476 133.333,66.6667C 133.333,103.486 103.484,133.333 66.6667,133.333C 29.8483,133.333 0,103.486 0,66.6667C 0,29.8476 29.8483,0 66.6667,0 Z M 66.6667,122.667C 97.5938,122.667 122.667,97.5938 122.667,66.6667C 122.667,35.739 97.5938,10.6667 66.6667,10.6667C 35.7389,10.6667 10.6667,35.739 10.6667,66.6667C 10.6667,97.5938 35.7389,122.667 66.6667,122.667 Z "/>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Button HorizontalAlignment="Center" Height="14" Width="14" Style="{StaticResource arrow}"/>
</Grid>
I'm trying to use the CommandBar class, but it isn't behaving.
Here is the XAML for my trivial test:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<CommandBar>
<AppBarButton Icon="NewWindow"></AppBarButton>
<CommandBar.SecondaryCommands>
<AppBarButton Label="Secondary Button"></AppBarButton>
</CommandBar.SecondaryCommands>
</CommandBar>
</Grid>
However, when I press the ... overflow button on the CommandBar to expose the overflow menu, for whatever reason there is an ugly extra blank chin on the bottom of the overflow menu, making the whole thing look rather unprofessional. Here is a screenshot of the problem, with the blank space underneath the Secondary Button being the problematic part.
When testing on a first-party Universal Windows Platform app like the Edge browser, there is no such chin on the dropdown. For what it's worth, though, I suspect that Edge is using a custom version of the CommandBar, as I don't think there is any way to avoid the CommandBar extending downwards when you tap the ... overflow button, or to insert icon buttons into the dropdown menu like used for the Zoom buttons.
This is indeed the default style of the CommandBar.
You can remove that blank space by editing a copy of the CommandBarOverflowPresenter template and removing the bottom margin on the ItemsPresenter. Here is the resulting style:
<Style TargetType="CommandBarOverflowPresenter">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"/>
<Setter Property="MaxWidth" Value="{ThemeResource CommandBarOverflowMaxWidth}"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CommandBarOverflowPresenter">
<Grid Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
<ScrollViewer AutomationProperties.AccessibilityView="Raw" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
<ItemsPresenter x:Name="ItemsPresenter" Margin="0"/>
</ScrollViewer>
<Rectangle Stroke="{ThemeResource SystemControlForegroundTransparentBrush}" StrokeThickness="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
While Olivier's answer does cover how to remove the space below the CommandBar when the overflow menu is open (and does it well) - it doesn't explain the reasoning behind the "blank space" in the first place.
I thought I would add an answer to give a bit of weight as to the use of that "blank space", for future visitors to this question.
The purpose of the overflow button ... is dual-purpose. I'll explain below.
1 - Avoid Ambiguity
The overflow button ... icon provides a way for the user to view the Labels for the PrimaryCommands (the ones along the main strip of the CommandBar).
This proves very useful in the case that some of the icons may not be immediately obvious as to what they might mean.
For example:
×
Could mean either "Cancel", "No", "Delete" etc.
We can add Label="Delete" to the AppBarButton in order to distinguish that this button is to "Delete" an item or whatever.
If the user were to wish to find out what the icons for the buttons mean/represent, they could simply tap the ... to show the labels for the buttons.
In your screenshot, because your PrimaryCommands don't have any labels, there is just the whitespace displayed.
Here's an example of how we can use the Label in order to understand what the buttons mean:
<CommandBar>
<CommandBar.PrimaryCommands>
<AppBarButton Icon="Back" Label="Back" />
<AppBarButton Icon="Stop" Label="Stop" />
<AppBarButton Icon="Play" Label="Play" />
<AppBarButton Icon="Forward" Label="Next" />
</CommandBar.PrimaryCommands>
<CommandBar.SecondaryCommands>
<AppBarButton Label="Like" />
<AppBarButton Label="Dislike" />
</CommandBar.SecondaryCommands>
</CommandBar>
The above code could be used to create a playback control bar for a media app:
When the user presses the ... button, the labels are then displayed clearly underneath each button - in order to see what they are intended for.
This kind of UI behaviour has been around since at least Windows Phone 8.1 (Silverlight), albeit with possibly different markup. I could be wrong - it could have been sooner - feel free to correct me
2 - Display SecondaryCommands
In addition to the above useful design feature (and as is obvious from the original question) - the ... overflow button can be pressed to show the SecondaryCommands.
It pops them out into view using the CommandBarOverflowPresenter that is defined.
This is more useful for "less important" actions that the user might wish to take. For example "Leave Feedback", "Download" - or whatever the designer might deem as not-so-important.
As per the sample above, the "Like" and "Dislike" buttons are not of utmost importance to the user in order to use the CommandBar effectively:
I hope this adds a bit of insight into how the CommandBar can be used to aid and enhance user experience in a UWP/WinRT/Silverlight app, in line with the currently accepted answer which shows how to remove the whitespace in the original question.
How to get rid of the blank space between a pivots item and the pivots borders?
I tried setting the margin and the padding to 0 but it does not help much. The reason I want to do this is the following - I figured that changing the template of the pivot to have a static ( not moving) header for three items is a bit hard and therefore I just put a StackPanel with three buttons above the pivot with three items, and I would manually select the pivot item in code behind when someone pushes the button. This approach is good enough for me, but has a certain flaw- a blank space between the items and the StackPannel , how can I remove it ?
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Button Click="Button_Click"/>
<Button Click="Button_Click_1"/>
<Button Click="Button_Click_2"/>
</StackPanel>
<Pivot>
<PivotItem>
<local:someControl />
</PivotItem>
<PivotItem>
<local:someControl />
</PivotItem>
<PivotItem>
<local:someControl />
</PivotItem>
</Pivot>
</StackPanel>
You can use negative value as margin to remove that blank space. Simply try
<Pivot Margin="0, -25, 0, 0">
Replace 25 with your desired value.
Setting the Pivot margin to negative works, but there is a better way using styles.
<Pivot>
<Pivot.Resources>
<Style TargetType="PivotItem">
<Setter Property="Margin" Value="0"/>
</Style>
</Pivot.Resources>
<PivotItem .../>
<PivotItem .../>
</Pivot>
I am working on Panorama App for Windows Phone 8 and I have to add Foreground image with the background image.I have successfully added the background image but i don't know how to add foreground image in the same layout.Please help.
<phone:Panorama Title="My_app">
<phone:Panorama.Background>
<ImageBrush ImageSource="/My_app;component/Assets/texture.png"/>
</phone:Panorama.Background>
Using this code i am adding background image but don't know how to add foreground image.
I want to add image in the place of title "My_App" .
To set an image instead of a text as title on a panorama control, just add a style to the panorama with a custom title template. For example you can do this by adding the following to the xaml of the page containing the panorama (note: the dots represent any other code):
<phone:PhoneApplicationPage>
...
<phone:PhoneApplicationPage.Resources>
...
<Style TargetType="phone:Panorama" >
<Setter Property="TitleTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Image Source="Assets/logo.png" Stretch="None" />
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
...
</phone:PhoneApplicationPage>
Hope this helps!
First, add a PanoromaItem, then add an image to that item:
<phone:PanoramaItem>
<Grid>
<Image x:Name="MyImage" />
</Grid>
<phone:PanoramaItem>
I want to disable Tile effect that is some kind of pushed effect and hover background color effect of ListView control, how can i do that?
Thanks
After some googling I found that the highlighting happens in the ListViewItemPresenter, which turns out to be pretty hidden. It's located inside the ControlTemplate of an ListViewItem, which is the ItemContainer for the ListView. The simplest way I've found to disable the effect is to simply override this ControlTemplate:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<TextBlock Text="List Item" />
...
<TextBlock Text="List Item" />
source: https://blog.jonstodle.com/uwp-listview-without-highlighting-and-stuff/
Look at this question:
Disable cross-slide selection for a listview
You can also make changes to the template to remove any visual states and adornments - go to the designer and right click your ListView/Edit Additional Templates/Edit Generated Item Container (ItemContainerStyle)/Edit a Copy... - that will extract the template you can modify using your preferred method.