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]):
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>
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)
I would like to have a popup window. Even though I am using MvvmCross, it will strictly run on Android. In Windows Store, you can do the following with xaml:
<Popup VerticalOffset="300" HorizontalOffset="200" x:Name="SigPopup" >
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="1">
<StackPanel>
<StackPanel Orientation="Horizontal" >
<Button x:Name="btnAccept" Content="Accept" Click="btnAccept_Click"/>
<Button x:Name="btnCancel" Grid.Column="1" Content="Cancel" Click="btnCancel_Click"/>
<TextBlock x:Name="txtSigner" Text="Shipper" Style="{StaticResource SubheaderTextBlockStyle}" Margin="25,3,0,0" />
</StackPanel>
<!-- Inking area -->
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="750" Height="175">
<Grid x:Name="inkPanel" Margin="5">
<!-- Inking area -->
<Canvas x:Name="InkCanvas" Background="White" Margin="5" />
</Grid>
</Border>
</StackPanel>
</Border>
</Popup>
You can use this to popup a window to collect a Signature. There is an accept and cancel button you can wire up accordingly. Is there any way to do this using MvvmCross? I have watched the ViewModel demo and saw where you could draw rectangles and put data in them and it was bound, but it didn't show how to make them go away once you were done. I had this vision of being able to popup some sort of child ViewModel with a SignatureWidget in it and collect a signature then close the popup. Can this be done using MvvmCross?
there is a Xamarin Component available.
Is this something that fits your need?
http://components.xamarin.com/view/signature-pad
Regards,
Benjamin
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 an image that is the stretched to be the size of the window (width and height wise).
I have a button that sits on top with the following XAML:
<Image Source="sample.png"></Image>
<Button Height="50" Width="100" Content="OverLay Image" Foreground="AliceBlue"
Background="Transparent" HorizontalAlignment="Left"
VerticalAlignment="Top"/>
This shows the button fine when I run, however, I'd like the button to have an image instead of text using this template:
<Button Height="50" Width="100" Content="OverLay Image"
Foreground="AliceBlue" Background="Transparent"
HorizontalAlignment="Left" VerticalAlignment="Top">
<Button.Template>
<ControlTemplate>
<Border>
<Image Source="img/sample.png"
Width="32"
Height="32"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
When I add the template section:
<Button.Template>
<ControlTemplate>
<Border>
<Image Source="img/sample.png"
Width="32"
Height="32"/>
</Border>
</ControlTemplate>
</Button.Template>
The button disappears. Has anyone seen this before or know how to force the button to show?
Thanks in advance!
It could be nothing, but I noticed that in your first (working) example of the Image, you used this path to your image:
<Image Source="sample.png"></Image>
But the one that you say doesn't work is using this path:
<Image Source="img/sample.png"/>
Maybe that was just an error you made copying it here, but otherwise, try this in your ControlTemplate:
<Image Source="sample.png"/>
Since you've changed the ControlTemplate it will only show your image. Everything looks fine, are you sure that the image path is correct? Try setting the background of the border to make sure that there isn't anything wrong with your template. Use Snoop to get look at the VisualTree and look at the source of the image.