How to change the default style of 'MediaSliderStyle' of MediaPlayerElement on XBox?
I can custom some colors in MediaTransportControls.xaml, and remove the default focused green border.
But how to make the circle grow just grow 2x bigger, when focused on the whole slider.
Currently when focued on the slider as pic.1, I have to press GamePadA, and turn to pic.2, then to move timeline.
How to define the behavior like Android TV, exo player, to let user do less operation.
Pic.1 Focused.
Pic.2 Selected timeline to fast forward and rewind.
Pic.3 Android TV(Exo player) timeline unfocued.
Pic.4 Android TV(Exo player) timeline focued, press left/right to fast forward and rewind.
You can find the default MediaTransportControls style here, which also includes the complete style code for the progress bar.
MediaTransportControls is composed of multiple controls. The progress bar is mainly composed of Slider and Thumb, but it does not expose states like ThumbFocus, only regular states such as PointerOver, Pressed, etc.
In the default code, we can change the size of the thumb by modifying the Width / Height of the HorizontalThumb:
...
<!-- Default width / height are 24 -->
<Thumb x:Name="HorizontalThumb"
Style="{StaticResource SliderThumbStyle}"
Height="10"
Width="10"
Grid.Row="0"
Grid.RowSpan="3"
Grid.Column="1"
FocusVisualMargin="-14,-6,-14,-6"
AutomationProperties.AccessibilityView="Raw">
...
Then change the size of the thumb in PointerOver state and Pressed state:
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0" Value="24" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Height">
<DiscreteObjectKeyFrame KeyTime="0" Value="24" />
</ObjectAnimationUsingKeyFrames>
...
</Storyboard>
</VisualState>
It works well in keyboard and mouse mode, but it won't take effect if the control is selected by switching focus.
If this effect is important, you may need to rewrite the Slider and create events when focus is acquired.
Best regards.
Related
A user drags the item to the right of the screen, and while they do so, I change the MainGrid's translate X to track the finger. Once they let go of the finger, the storyboard completes the drag by animating MainGrid's translate X to the final value.
Basically I would like to say "CURRENT!" as per below, but this is not valid xaml. Search msdn docs or the internet didn't help. Must be something simple, right?
<VisualTransition To="Dismissed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MainGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
<LinearDoubleKeyFrame KeyTime="0:0:0" Value="CURRENT!" />
<SplineDoubleKeyFrame KeySpline="0.1, 0.9, 0.2, 1" KeyTime="0:0:1.0" Value="385" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
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.
I'm developing Windows Phone 8.1 application using C#/XAML. The main view of the application contains Windows.UI.Xaml.Controls.ListView class populated with items (the result of some search query).
When users taps an item an additional information pane (ExtendedInfoPanel) for that item should appear, but only for this item (i.e. only one item at a time should expose that additional information).
I played with customizing of <VisualStateGroup x:Name="SelectionStates"> by editing a copy of default ItemContainerStyle but without success.
Here is my code (only relevant parts):
<Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ExtendedInfoPanel">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</Style>
<ListView
x:Name="myList"
Margin="0,0,0,0"
IsItemClickEnabled="False"
ItemsSource="{Binding Source={StaticResource myDataSource}}"
SelectionMode="Single"
ItemTemplate="{StaticResource mySongDataTemplate}"
ItemContainerStyle="{StaticResource ListViewItemStyle1}">
</ListView>
Running the snippet above ends in Windows.UI.Xaml.UnhandledExceptionEventArgs exception being thrown in application with message:
Cannot resolve TargetName ExtendedInfoPanel.
Could anybody give me some hints how can I achieve needed behavior?
When you have named elements in a datatemplate you cannot access them by name outside of that data template. The reason for this and a method to access that element is explained here by Jerry Nixon.
In short you can navigate the visual tree and find your ExtendedInfoPanel element and change it's visibility. However, in your question you say that you only want one item to display it's details. That means that you should search the visual tree for all other ExtendedInfoPanel elements and hide them. That doesn't sound very effective.
My approach would be more mvvm like. In your model, provide a boolean IsVisible property for the class that will be associated with ExtendedInfoPanel and bind that to the visibility of the element.
Then on the tap event of the list cast the datacontext of the tapped item as your model class and change the IsVisible property for the tapped element and for all the other elements in your collection.
Tip: You will need an ObservableCollection so that the changes are propagated to the UI. Alternatively you will need to implement INotifyPropertyChanged.
I'm trying to create an animation in a Windows Store App pretty much like the following: http://codepen.io/HugoGiraudel/pen/BHEwo
From what I search I end up with RadialGradientBrush or Ellipse.OpacityMask that do not exist in WinRT. I've considered using a PieChart library, however, given the simplicity of the animation, I think there must a better way of doing this. Any ideas?
I found this link last night that I think is somewhat relevant to your problem.
http://social.technet.microsoft.com/wiki/contents/articles/20648.using-the-rendertargetbitmap-in-windows-store-apps-with-xaml-and-c.aspx
I did a search and found this:
https://msdn.microsoft.com/en-us/library/system.windows.uielement.clip(v=vs.110).aspx
I think the xaml at the bottom might get your in the right direction.
<Image
Source="sampleImages\Waterlilies.jpg"
Width="200" Height="150" HorizontalAlignment="Left">
<Image.Clip>
<EllipseGeometry x:Name="MyEllipseGeometry1"
RadiusX="100"
RadiusY="75"
Center="100,75"/>
</Image.Clip>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard>
<PointAnimation
Storyboard.TargetName="MyEllipseGeometry1"
Storyboard.TargetProperty="(EllipseGeometry.Center)"
From="0,0" To="200,150" Duration="0:0:3" RepeatBehavior="Forever"
AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
I'm trying implicitly apply a style for DataGrid and TextBlocks.
For TextBlock's ForeGround I need White color.
For DataGrid's rows I need Black Color.
Beside this I need White again for DataGrid's header columns.
When I globally apply an implicit style for on MainPage by
<UserControl>
<UserControl.Resorces>
<Style targetType="TextBlock">
<Setter Property="Foreground" Value="White"/>
</Style>
</UserControl.Resorces>
</UserControl>
Making TextBlock's Foreground White operation is done! But beside this all of elements
in DataGrid (By default content elements are textblock's I think) turn to White color.
It doesn't look good White on white as you guess :)
So how can I particularly specify DataGrid's elements Foreground to black?
I can do it by using same technic shown below ,but this is an expensive operation for each DataGrid. As a con more I want DataGrid's HeaderColumns white again.This operation make them all black.
Is there an explicit way such as we do in css styles?
Here is what I tried to achieve this goal by Control template. But no chance because of being DataGrid's ContentControl is dynamic.
<DataGrid>
<DataGrid.Resources>
<Style targetType="TextBlock">
<Setter Property="Foreground" Value="Black"/>
</Style>
<DataGrid.Resources>
In fact we use Telerik's RadGridView but I give a sdk's DataGrid example to make question more global.
<Style TargetType="sdk:DataGrid">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="RowDetailsTemplate" Value="{StaticResource DataTemplate1}"/>
<Setter Property="Template" Value="{StaticResource ControlTemplate1}"/>
</Style>
<ControlTemplate x:Key="ControlTemplate1" TargetType="sdk:DataGrid">
<Grid/>
</ControlTemplate>
<DataTemplate x:Key="DataTemplate1">
<Grid/>
</DataTemplate>
Thanks in advance!
If it were me I would pull out the full control templates and style them accordingly instead of trying to just do adhoc setter changes to override bits of the original template. In Expression Blend right click, choose "Edit Template -> Edit A Copy" and break out the templates for your rows etc and apply those implicitly with StaticResource instead.