I'm writing a WPF desktop application, with some video playback functions. I decided to use LibVLCSharp.WPF to complete the playback task.
Xaml code:
<UserControl ...
xmlns:vlc="clr-namespace:LibVLCSharp.WPF;assembly=LibVLCSharp.WPF"
... >
<vlc:VideoView VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Canvas VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MouseEnter="Canvas_MouseEnter">
</Canvas>
</vlc:VideoView>
</UserControl>
It works fine with playing video, but when I tried to put some hidden controls inside Canvas (or any other type of Panel control) and change their visiblity with MouseEnter event, nothing happens.
While debugging, I found out that MouseEnter event can only fire when Canvas has at least one visible control as its child, and mouse pointer entered that visible control.
I have read the articles about "airspace issue". It seems nothing to do with me since I just want to draw a control layer exactly inside playback area.
Is there any way that I can put an auto show panel on VLC player, which only shows when mouse "hovered" over playback area?
Problem solved with hint from #cube45 . Thank you.
I changed Background of Canvas to something that "not so transparent".
Xaml code:
<Canvas Background="#01000000" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MouseEnter="Canvas_MouseEnter">
</Canvas>
And mouse events worked. Tricky, but useful.
Related
I am trying to make responsive WPF app which shows image. One of the program's functionalities is selecting a piece of an image by clicking and draging the mouse. I use Point p = e.GetPosition((IInputElement)sender); to find cursor position, and I found out I cannot use Stretch="Fill" because it causes the MouseUp cursor to select a little lower than it should and MouseMove is also inaccurate (I have to drag the mouse a lot further than I should). On the internet, I found the reason for this behavior that you cannot use Fill and have to use None instead. However, the image is much smaller without Fill.
This is my XAML:
<Grid Grid.Row = "1"
Grid.Column="1"
HorizontalAlignment="Left"
VerticalAlignment= "Top"
Margin="0,30,0,0">
<Image x:Name= "image1"
Grid.Row = "1"
Grid.Column="1"
Cursor="Cross"
MinWidth="300"
MinHeight="300"
MaxWidth="512"
MaxHeight= "512"
Stretch = "None"
RenderOptions.BitmapScalingMode="NearestNeighbor"
RenderOptions.EdgeMode="Aliased"
VerticalAlignment="Top"
MouseDown="picOriginal_MouseDown"
MouseMove="picOriginal_MouseMove"
MouseUp="picOriginal_MouseUp" />
</Grid>
I don't know how to embed my image so that in the window view it fills the grid without this Fill property and at the same time is responsive for fullscreen. Should I wrap Image with something else from the WPF toolbox?
I find it easier using the background of the picture box to be the image then use the stretch in that. Alternatively, you could use the image with any of the other options, try using the the properties tab, here are the other stretch options tho: None, Fill, Uniform, UniformToFill
Tell me if this helps, tryna get rep, thanks!
I'm working on updating previously working app. Testing shows the ScrollViewer acting oddly when the Zoom makes part of the contained images fall off the screen. The original app was created with VS 2013 as a Universal Windows app. The new app is created with VS 2015 as a Universal Windows app though the target build has been shifted to the anniversary release.
My XAML is defined so:
<ScrollViewer x:Name="SV1" Grid.Row="1" HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
SizeChanged="SV1_SizeChanged" ZoomMode="Enabled" >
<StackPanel x:Name="ImagePanel" Orientation="Horizontal" HorizontalAlignment="Center"
VerticalAlignment="Top" >
<Image x:Name="ImageLeft" Stretch="Uniform" />
<Image x:Name="ImageRight" Stretch="Uniform" />
</StackPanel>
</ScrollViewer>
The user can change the ZoomLevel of the ScrollViewer. The zoom change is implemented using SV1.ChangeView(null, null, zoomFactor).
The images visibly change size on the screen, but as they fall off the right or bottom the scrollbars don't appear. Even changing the visibility properties to "Visible" instead of "Auto" doesn't cause the scrollbars to appear. When the size changes and for a brief instant a thin line will appear where the bars should be and then disappear. Additionally, user input that would normally scroll like moving the mouse wheel does nothing.
Based on other commentary, I've tried replacing the StackPanel with a Grid with no apparent effect.
I'm drawing a blank. Any ideas?
It appears the answer is the next control which shares the same visual space needs to be set to Visibility="Collapsed" in the XAML. The visibility is controlled programmatically, but without the XAML tag the scrollbars of the previous control don't appear and with the tag they do.
I have designed a Window in WPF that has 2 web browser controls. Each one has its own scroll bar. Touch events work for scrolling until I want to scroll them at same time.
<Grid x:Name="grid1">
<DockPanel x:Name="DockLeft" HorizontalAlignment="Left">
<WebBrowser></WebBrowser>
</DockPanel>
<DockPanel x:Name="DockLeft" HorizontalAlignment="Right">
<WebBrowser></WebBrowser>
</DockPanel>
</Grid>
How it is possible to have two isolated areas for touch event?
You need to override Touch event on both WebControls(in event you have access to finger motions etc..) and provide custom logic there. Should be little work, but it should be ok.
I am using the Fluidkit ElementFlow control that I use to display a UserControl that contains textblock with a ScrollViewer as well as button and when they are displayed in the ElementFlow control, all of the buttons and the ScrollViewer seem to be disabled because I can't scroll the ScrollViewer scrollbar and even a simple action as hovering over a button doesn't do anything to the button.
Below is an example of the TextBlock in a ScrollViewer that does not allow for scrolling when used in the ElementFlow.
How can this be fixed?
<ScrollViewer
Height="1200" Width="800"
MaxHeight="1200" MaxWidth="800"
VerticalScrollBarVisibility="Auto">
<TextBlock
Height="Auto" Width="800"
MaxWidth="800"
FontSize="20"
Text="Super long text"
TextWrapping="Wrap"/>
</ScrollViewer>
Just looking over the source code for the project, it looks like it is creating a 3D mesh, and painting the controls on the mesh. This would prevent all user interaction. I don't think there is an easy way to work around this.
However, since you have the source code, you can do the work yourself to make it happen. You're going to need to modify how the ElementFlow represents its items. Look at the CreateMeshModel function. It is currently creating a mesh and applying a VisualBrush to it. Instead, look at the blog post Interacting with 2D on 3D in WPF to figure out what needs to happen.
Inside ScrollViewer control I have a large image and I want to use scroll bars to move that image inside ScrollViewer. See XAML code below:
<ScrollViewer HorizontalAlignment="Left" Height="282" Width="554"
HorizontalScrollBarVisibility="Visible" VerticalScrollMode="Enabled">
<Image HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top"
Source="Assets/big_image.jpg" Stretch="None" ManipulationMode="None"/>
</ScrollViewer>
This works fine on my PC. I can use mouse to move image inside ScrollViewer by using scrollbars. But when I deploy application on the tablet, I cannot do anything. The scrollbars are not visible and I cannot use gestures to manipulate the image. Does anyone know how can I solve this problem?
There is a Microsoft example with similar functionality:
http://code.msdn.microsoft.com/windowsapps/XAML-ScrollViewer-pan-and-949d29e9
This example uses a Scrollviewer with an inside image to show the capabilities of the ScrollViewer control to pan and zoom. I tried it with a tablet and it works well.
Hope it helps.