I'm struggling to get something similiar to what I painted in Photoshop (took over 9000 hours).
Basically our Windows app for tablets needs a control that shows an onscreen grid when clicked. The data genesis and grid preparation occurs in codebehind of the control and I don't know how to draw the grid outside of my control. Even simple popup control would be fine if I could get it outside the parent boundaries.
You could use a flyout:
<Button Width="100" Height="100" Background="Black">
<Button.Flyout>
<Flyout Placement="Bottom">
<Grid Width="200" Height="200">
<StackPanel>
<Rectangle Fill="Red" Width="100" Height="100" />
<Rectangle Fill="Green" Width="100" Height="100" />
</StackPanel>
</Grid>
</Flyout>
</Button.Flyout>
</Button>
also you can prepare your own popup:
How to center a popup in window (Windows store apps)
Related
I am trying to make a smooth transition from a closed panel to an open panel and vice versa.
But I don't know how to do it ((
I have an element
<SplitView Style="{StaticResource SplitViewEditMusicTraskStyle}"
CompactPaneLength="0"
PaneBackground="Transparent"
DisplayMode="CompactInline"
IsPaneOpen="{Binding EditPanelIsOpen, Mode=TwoWay}"
OpenPaneLength="308"
Background="Transparent"
PanePlacement="Right">
I could not attach the standard element template because stackoverflov has a limit on the number of characters per stack
How to make a smooth transition from one state to another SplitView UWP
During the testing, if set PanePlacement right, for making SplitView panel open smoothly, please set DisplyMode as Overlay or CompactOverlay.
<SplitView x:Name="splitView" PaneBackground="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"
IsPaneOpen="False" OpenPaneLength="328" CompactPaneLength="56" DisplayMode="CompactOverlay">
For your requirement, you could also make pop control and set ChildTransitions as PaneThemeTransition to archive smooth transition from a closed panel to an open panel. For more please refer following code.
Xaml code
<Popup
x:Name="RightMeun"
Width="200"
Height="{Binding ElementName=RootGrid, Path=ActualHeight}"
HorizontalAlignment="Right"
IsOpen="False">
<Popup.ChildTransitions>
<TransitionCollection>
<PaneThemeTransition Edge="Right" />
</TransitionCollection>
</Popup.ChildTransitions>
<Grid
Width="200"
Height="{Binding ElementName=RightMeun, Path=Height}"
Background="LightBlue">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="Hello" />
</Grid>
</Popup>
Below is my design containing media element, play, pause, full window and seeker.
<MediaElement x:Name="VideosMediaElement" VerticalAlignment="Top"
Height="250" Width="355" Margin="0,20,0,0"
BufferingProgressChanged="VideosMediaElement_BufferingProgressChanged"
RealTimePlayback="True"
/>
<Grid x:Name="mediaGrid">
<Border VerticalAlignment="Bottom" Height="60" Background="Black"
Opacity="0.1">
</Border>
<Image x:Name="PlayIcon" Source="Assets/Play-icon.png"
Height="35" HorizontalAlignment="Left" VerticalAlignment="Bottom"
Margin="3,0,0,10" Visibility="Collapsed" Tapped="PlayIcon_Tapped">
</Image>
<Image x:Name="PauseIcon" Source="Assets/Pause.png"
Height="35" HorizontalAlignment="Left" VerticalAlignment="Bottom"
Margin="3,0,0,10" Tapped="PauseIcon_Tapped" Visibility="Visible">
</Image>
<TextBlock x:Name="duration" Foreground="White" VerticalAlignment="Bottom"
Margin="43,0,0,20">
</TextBlock>
<ProgressBar x:Name="videoProgressBar" VerticalAlignment="Bottom"
Margin="15 0 10 25" Foreground="DarkBlue" Background="Gray"
Width="180" Height="10" Minimum="0"
Maximum="{Binding Path=NaturalDuration.TimeSpan.TotalSeconds,
Mode=TwoWay,
ElementName=VideosMediaElement}"
Value="{Binding Path=Position.TotalSeconds, Mode=TwoWay,
ElementName=VideosMediaElement}"
Tapped="videoProgressBar_Tapped"
/>
<TextBlock x:Name="maximumDuration" Foreground="White" Margin="0,0,40,20"
VerticalAlignment="Bottom" HorizontalAlignment="Right">
</TextBlock>
<Image x:Name="ExpandEnabled" Source="Assets/Fullscreen.png"
Tapped="Zoom_Tapped" Height="35" Margin="0 0 3 10"
HorizontalAlignment="Right" VerticalAlignment="Bottom">
</Image>
</Grid>
If I click the full window icon on the right hand side, the video shows as full window with play, pause, seeker and full window button.
VideosMediaElement.IsFullWindow = true;
<MediaElement x:Name="VideosMediaElement" VerticalAlignment="Top"
Height="300" Width="360"
BufferingProgressChanged="VideosMediaElement_BufferingProgressChanged"
AreTransportControlsEnabled="True">
<MediaElement.TransportControls>
<MediaTransportControls IsCompact="True" IsZoomButtonVisible="False"
IsZoomEnabled="False"
IsPlaybackRateButtonVisible="True"
IsPlaybackRateEnabled="True"
/>
</MediaElement.TransportControls>
</MediaElement>
The video plays in full window, but play, pause and seeker are hiding when I set the IsWindowFull property. How to show those controls when the media element is in full window?
You can check the Live Visual Tree to check your Layout in the run-time:
When a MediaElement enters into the FullScreen mode, FullWindowMediaRoot will host the MeidiaElement and your mediaGrid will not be shown in this time. One method is as #Chris W. said use the TransportControls of MediaElement, but this is not available in Windows 8.1 app, as you developed a windows phone 8.1 app, there is no such problem.
Since custom transport control is not supported in WP8.1, for windows phone 8.1 app, you can manually set the Width and Height of MediaElement to App's size for example like this:
VideosMediaElement.Width = Window.Current.Bounds.Width;
VideosMediaElement.Height = Window.Current.Bounds.Height;
Since the app runs on WP8.1 as full screen mode, this method will also make the MediaElement looks like it is in full screen mode. And when you want to "exit from full screen mode", you can just reset the Height and Width properties.
I am currently working on Windows Universal Apps.In that there is requirement to show menu from left side when User clicks on menu icon. I want add a ListView inside it and handle the selectionchanged event based on user's selected item. Now, the problem with Flyout is that it opens like a popup on clicking the icon but what I actually want to do is it should come from left side of the window .For e.g in Gmail application of android. Please can anyone suggest how to achieve this. Please find below my code which I added in Flyout below:
<Image Source="ms-appx:///Images/menu_image.png"
HorizontalAlignment="Left"
Tapped="Image_Tapped"
Width="60"
Height="90"
Grid.Column="0"
VerticalAlignment="Center">
<FlyoutBase.AttachedFlyout>
<Flyout>
<Grid x:Name="SettingsPane"
Background="{StaticResource AppBackGroundColor}"
Grid.Row="0"
Width="380">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EdgeUIThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0"
Margin="8">
<TextBlock Name="SidebarTitletxtblk"
FontSize="25"
TextWrapping="Wrap"
Style="{StaticResource BaseTextBlockStyle}" />
</StackPanel>
<ListView Grid.Row="1"
x:Name="LocationPickerList"
SelectionChanged="LocationPickTypeSelected"
Margin="0,10,0,0"
ItemContainerStyle="{StaticResource GenericListViewContainerStyle}"
ItemTemplate="{StaticResource LocationPickerListItemTemplate}"></ListView>
</Grid>
</Flyout>
</FlyoutBase.AttachedFlyout>
</Image>
You can't override the Flyout's standard transition. If you want to apply something else then you can use a Popup instead and customize it however you'd like. To have it slide in from the left apply an EdgeUIThemeTransition (if it's short) or a PaneThemeTransition (if it's full height) with Edge=Left.
For example:
<Popup x:Name="flyoutPane" IsOpen="False" IsLightDismissEnabled="True"
Width="320" HorizontalAlignment="Left">
<Popup.ChildTransitions>
<TransitionCollection>
<!--<EdgeUIThemeTransition Edge="Left" />-->
<PaneThemeTransition Edge="Left" />
</TransitionCollection>
</Popup.ChildTransitions>
<Grid Width="380" Height="{Binding ElementName=flyoutPane, Path=Height}" Background="{ThemeResource FlyoutBackgroundThemeBrush}" >
<TextBlock Text="Grid contents here" />
</Grid>
</Popup>
And trigger it from your Button Click (your Image sounds like it should be a Button rather than using Tap, unless you have an alternate keyboard method - you can template off the button look while keeping the button semantics).
private void Button_Click(object sender, RoutedEventArgs e)
{
// Height is only important if we want the Popup sized to the screen
flyoutPane.Height = Window.Current.Bounds.Height;
flyoutPane.IsOpen = true;
}
If you're doing many of these you can create a custom control with an attached property similar to FlyoutBase.AttachedFlyout.
I have a WPF window that hosts a simple layout of a home button, top row of buttons and a video feed
but when I maximise the window. the layout is out of sync with the standard view.
I have tried to remedy some of the layout by setting the image element to stretch "fill" but the top row of buttons don't look uniform also the home button relocates to the center of the screen which doesn't look good
My question I how would I adjust the xaml layout properties to support standard and maximised view?
This is the layout for the window:
<Window x:Class="KinectKickboxingBVversion1.TrainingFrm"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TrainingFrm" Height="377.612" Width="637.313" Loaded="Window_Loaded">
<Grid>
<StackPanel Orientation="Horizontal" >
<Button x:Name="jabBtn" Background="BlueViolet" Content="Jab" Width="100" Height="50" Click="jabBtn_Click" HorizontalAlignment="Center" VerticalAlignment="Top"/>
<Button x:Name="crossBtn" Background="BlueViolet" Content="Cross" Width="100" Height="50" Click="crossBtn_Click" HorizontalAlignment="Center" VerticalAlignment="Top"/>
<Button x:Name="jabCrossHookBtn" Background="BlueViolet" Content="Jab-Cross-Hook" Width="100" Height="50" Click="jabCrossHookBtn_Click" HorizontalAlignment="Center" VerticalAlignment="Top"/>
<Button x:Name="pKickBtn" Content="Push Kick" Background="BlueViolet" Width="100" Height="50" Click="pKickBtn_Click" HorizontalAlignment=" Center" VerticalAlignment="Top"/>
<Button x:Name="blockBtn" Content="Kick Block" Background="BlueViolet" Width="100" Height="50" Click="blockBtn_Click" HorizontalAlignment=" Center" VerticalAlignment="Top"/>
<Label Content="SCORE: " x:Name="lblScore" Visibility="Collapsed"/>
<TextBlock x:Name="tblkScore" />
</StackPanel>
<Viewbox Grid.Row="1" Stretch="Uniform" HorizontalAlignment="Center">
<Image x:Name="KinectVideo" Width="640" Height="250" Visibility="Visible" Stretch="Fill" />
</Viewbox>
<Button x:Name="homeBtn" Content="" Width="50" Click="homeBtn_Click" Height="35" Margin="272,294,277,10" >
<Button.Background>
<ImageBrush ImageSource="Images/ContentIcon.png" />
</Button.Background>
</Button>
</Grid>
</Window>
Your buttons are all a fixed size. StackPanel just plonks them next to each other, so when your screen size is bigger, you end up with space left over on the right.
Same with your home button. It's being positioned via the absolute margins.
You could make your layout fluid by using 6 grid columns for the top buttons, and removing the margins on the home button and just setting it to HorizontalAlignment="Center" VerticalAlignment="Bottom".
However, this will still result in effectively smaller text on the buttons. If you want the display to always have the same proportions it may be easier for you to simply plonk the whole thing in a ViewBox.
use grid instead of stackpanel and set the column width to "*" and put your buttons in that grid
I have a MediaElement object in my XAML, which loads my movie just fine. What I want to do is render the play, pause and stop buttons right in the center my MediaElement object, kind of like how if you embed a YouTube video on a web page, you get the big play button in the center of the video. Can I do this in WPF using MediaElement?
In case anyone else ever needs to do this, I figured it out. I simply created a Canvas and stuck the MediaElement and the Button both inside the Canvas. I then used ZIndex to change the ZOrdering so the button was on top. Finally, I centered the button on top of my movie. Here is the XAML:
<StackPanel Orientation="Horizontal" Background="LightGray" DockPanel.Dock="Bottom" Height="100">
<Canvas Width="100">
<Button Canvas.ZIndex="2" Canvas.Left="42" Canvas.Top="35">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Polygon Points="0,0 0,26 17,13" Fill="#80000000" Stroke="White" />
</ControlTemplate>
</Button.Template>
</Button>
<MediaElement Canvas.ZIndex="1" Canvas.Top="0" Canvas.Left="0"
x:Name="mediaElement1" UnloadedBehavior="Manual" LoadedBehavior="Manual" ScrubbingEnabled="True"
Loaded="mediaElement1_Loaded" Width="100" Height="100">
</MediaElement>
</Canvas>
</StackPanel>
Or you need to place mediaElement and Buttons to same Grid and set Canvas.ZIndex to higher number than 0:
<Grid>
<Button VerticalAlignment="Center" HorizontalAlignment="Center" Height="50" Width="100" Canvas.ZIndex="1">Button</Button>
<MediaElement Source="/Assets/ladybug.wmv">
</MediaElement>
</Grid>
(actually you don't need Canvas [works on UWP]):