I am trying to overlay buttons on a WindowsFormsHost that contains an activeX control embedding VLC. The issue I have is that activeX is always on top of wpf. Are there any ways to get a wpf control over the activeX control?
The VLC control also does not seem to support rendering to a bitmap.
I finally found a solution. The popup primitive is also an element that is always on top and can be placed over the vlc control. Its a bit of a hack, but it gets the overlay that I needed. My xaml for the player looks like this
<grid>
<WindowsFormsHost x:Name="Host"
Height="200"
Width="200" />
<Border x:Name="Anchor"
Height="0"
Width="0"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
<Popup Width="{Binding ElementName=Host,Path=Width}"
Height="{Binding ElementName=Host,Path=Height}"
PlacementTarget="{Binding ElementName=Anchor}"
AllowsTransparency="True"
IsOpen="True">
<Border Background="#30808080"
Width="{Binding ElementName=Host,Path=Width}"
Height="{Binding ElementName=Host,Path=Height}">
<Button Content="Start"
Height="20"
Width="60"
Click="button1_Click"/>
</Border>
</Popup>
</grid>
The above puts a light grey transparent layer over the vlc player that contains a button. The above doesn't account for if the window is resized or moved, but the issue of putting something wpf over the control has been solved.
Short answer: No.
Extracted from MSDN:
In a WPF user interface, you can change the z-order of elements to
control overlapping behavior. A hosted Windows Forms control is drawn
in a separate HWND, so it is always drawn on top of WPF elements.
For the case of VLC, there is VideoLan.Net available at: http://vlcdotnet.codeplex.com/
which allows for video to be output to an Image.
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 using MediaPlayerElement, when my app window in normal size, I have a Button and a TextBox on the MediaPlayerElement. But when I click fullscreen or compact button to enter fullscreen or compact mode, they disappeared.
How to show them in full screen or compact mode?
A helpfull repo is here, sync the TextBox to fullscreen.
For your requirement, you could custom your MediaTransportControls and found ControlPanel_ControlPanelVisibilityStates_Border in the style. Then add your element under the that border.
For example
<Border x:Name="ControlPanel_ControlPanelVisibilityStates_Border">
<Grid>
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Top"
FontSize="25"
Foreground="Red"
Text="This is title"
/>
<Grid
x:Name="ControlPanelGrid"
VerticalAlignment="Bottom"
Background="{ThemeResource SystemControlPageBackgroundAltMediumBrush}"
RenderTransformOrigin="0.5,0.5"
......
I add the title TextBlock into the style.
I have a window with a WindowChrome object and a UserControl full of buttons
<WindowChrome.WindowChrome>
<WindowChrome GlassFrameThickness="0,0,0,1" ResizeBorderThickness="2,0,2,2" />
</WindowChrome.WindowChrome>
<Objects:WindowButtons x:Name="WinButtons" Grid.Column="5" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,0,0" Grid.ColumnSpan="2"/>
I want to have a nice unbordered window while maintaining ease of controlling the size.
However the resize tool overlaps the buttons so I cannot click on it and I can only click on the bottom left of the button
How can I place the buttons above the resize dialog?
It sounds like you simply need to add this property to your button:
WindowChrome.IsHitTestVisibleInChrome="True"
I'm trying to implement a nice-looking horizontally scrolled gridview inside my app. I have already implemented it using the Q42.WinRT library like this:
<Canvas>
<StackPanel Orientation="Horizontal" Height="768">
<StackPanel.RenderTransform>
<CompositeTransform
TranslateX="{Binding ElementName=MyScrollViewer, Path=HorizontalOffset, Converter={StaticResource ParallaxConverter}}" />
</StackPanel.RenderTransform>
<Image Source="/Assets/3.jpg" Width="1366" Stretch="UniformToFill"/>
<Image Source="/Assets/1.jpg" Stretch="UniformToFill"/>
<Image Source="/Assets/2.jpg" Stretch="UniformToFill"/>
</StackPanel>
</Canvas>
<ScrollViewer
x:Name="MyScrollViewer"
HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Auto"
VerticalScrollMode="Disabled"
VerticalAlignment="Center"
Height="768">
<GridView>
//...my gridview goes here
</GridView> </ScrollViewer>
Everything works fine, however in my app I need to use semantic zoom, and I found that semantic zoom does NOT WORK properly when put inside a ScrollViewer.
Generally all the solutions for parallactic backgrounds that I found on the internet implement some kind of functionality over a scrollviewer, which is unfortunate for me as I cannot use it.
Can anybody think of another way to achieve the desired effect?
Generally putting GridViews inside a ScrollViewer is not a great idea since they already have ScrollViewers inside of them...
You should put your 2 GridViews inside a SemanticZoom.
Perhaps you could edit the template for your GridView and put a parallax background in there - perhaps as a Canvas with some content that responds to the ViewChanged events on the GridView.
EDIT*
You inspired me to try to write a ParallaxBackgroundBehavior for the Toolkit. :)
You can see an early version here. There is also a sample included.
I have a problem understanding one style definition in Windows 8 metro apps.
When you create a metro style application with VS, there is also a folder named
Common
created. Inside this folder there is file called
StandardStyles.xaml
Now the following snippet is from this file:
<!-- Grid-appropriate 250 pixel square item template as seen in the GroupedItemsPage and ItemsPage -->
<DataTemplate x:Key="Standard250x250ItemTemplate">
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding Image}" Stretch="UniformToFill"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
What I do not understand here is the static resource definition, e.g. for the Border
Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"
It is not about how you work with templates and binding and resources.
Where is this ListViewItemPlaceholderBackgroundThemeBrush located?
Many thanks for your help.
Dimi
In Windows 8 customer preview you can find the file containing the resources' definition (including ListViewItemPlaceholderBackgroundThemeBrush) at:
C:\Program Files (x86)\Windows Kits\8.0\Include\winrt\xaml\design\themeresources.xaml
This is one of those incredibly frustrating things that should be in Microsoft's documentation, but isn't (yet).
ListViewItemPlaceholderBackgroundThemeBrush is one of the System Brush Resources. It's defined by the Metro "Light" or "Dark" theme (whichever you selected for your app).
You can see the full list of system brushes in Blend. (Unfortunately, I haven't found any way to enumerate them in code. There doesn't seem to be any programmatic way to inspect the theme resources.)
Here are some steps that will get you to the full list. (Of course, you can abbreviate the steps if you're already familiar with Blend.)
Open Expression Blend.
Create a new project, and select XAML (Windows Metro style) > Blank App (XAML) and click OK.
Click in the design surface to select the Grid. (In the "Objects and timeline" docked window in the lower-left, the "[Grid]" line will become highlighted.)
In the Properties docked window in the upper right, find the "Brush" category.
Right below where it says "Background: No brush", there's a row of five buttons. Click the rightmost button ("Brush resources").
The list of system brush resources will appear in the listbox.