I want to display a progress bar in WPF Page,when it loaded. I used media element to display a gif image. Below code describe what I did.
<Page x:Class="WpfApplication3.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Title="Page1" Loaded="Page_Loaded">
<Grid>
<MediaElement Grid.Column="2" Grid.Row="4" Margin="0,0,47,0" HorizontalAlignment="Right" Width="80" Source="progress.gif" LoadedBehavior="Manual" Name="MP"/>
</Grid>
</Page>
private void Page_Loaded(object sender, RoutedEventArgs e)
{
MP.Play();
}
but this progress bar not showing in Page
How can I fix this.
(when I tried with progress bar also, got same problm)
(It works ok in window )
You could use the WpfAnimatedGif library to easily display an animated gif using a simple Image element:
How do I get an animated gif to work in WPF?
Just download the package from NuGet: https://www.nuget.org/packages/WpfAnimatedGif
And set the ImageBehavior.AnimatedSource attached property of the Image element:
<Page x:Class="WpfApplication3.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Title="Page1"
<Grid>
<Image gif:ImageBehavior.AnimatedSource="progress.gif" />
</Grid>
</Page>
Related
I am trying to use MediaPlayerElement in a WPF to play streaming videos. I have set up a simple WPF window that contains a MediaPlayerElement instance and auto-plays a video. When I run the program, I can hear audio but the video is not visible.
I started by following this tutorial:
https://learn.microsoft.com/en-us/windows/communitytoolkit/controls/wpf-winforms/mediaplayerelement
Unfortunately the tutorial appears to be out of date, as it no longer works. I made a few corrections to get it to a running state, but cannot get the video to appear.
I have tried placing the MediaPlayerElement inside a Grid or StackPanel, but can't because it is not a UIElement.
<Window x:Class="MediaPlayerElement_Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MediaPlayerElement_Test"
xmlns:controls="clr-namespace:Microsoft.Toolkit.Forms.UI.Controls;assembly=Microsoft.Toolkit.Forms.UI.Controls"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<controls:MediaPlayerElement Name="mediaPlayerElement" AutoScaleDimensions="800,450"
Source="https://mediaplatstorage1.blob.core.windows.net/windows-universal-samples-media/elephantsdream-clip-h264_sd-aac_eng-aac_spa-aac_eng_commentary-srt_eng-srt_por-srt_swe.mkv"
AutoPlay="True" Anchor="Top" Height="450" Width="800" AreTransportControlsEnabled="True" />
</Window>
Does anyone know what I am doing wrong here? How do I get the video to display in the window?
Try this one, this works perfectly for me
<Window x:Class="Test.Media"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Test"
mc:Ignorable="d"
Title="Media" Height="450" Width="800">
<Grid>
<MediaElement Margin="10,10,10,0 " Source="http://mediaplatstorage1.blob.core.windows.net/windows-universal-samples-media/elephantsdream-clip-h264_sd-aac_eng-aac_spa-aac_eng_commentary-srt_eng-srt_por-srt_swe.mkv"
Name="McMediaElement"
Width="450" Height="250" LoadedBehavior="Play" UnloadedBehavior="Stop" Stretch="Fill"/>
</Grid>
if this is not working then it might be the issue with your video codec
This question already has answers here:
If the user logs on successfully, then I want to show the main window, if not, I want to exit the application
(3 answers)
Closed 4 years ago.
I have a main window that I created and it looks like usual log in screen.
Once the user click on a button I would like the whole window to change.
In all the examples I saw either I have to keep a stackpanel/dock and then only the frame changes.
For example, I have the following Main window xaml:
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Frame x:Name="Main" Margin="0,35,0,0"/>
<Button Content="Button" Click="Button_Click" Margin="0,105,326,100"/>
</Grid>
</Window>
and the new page:
<Page x:Class="WpfApp1.Optimizer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Title="Optimizer">
<Grid Background="Black">
<Button Content="Button" HorizontalAlignment="Left" Height="91" Margin="125,87,0,0" VerticalAlignment="Top" Width="129"/>
</Grid>
</Page>
And my command is:
private void Button_Click(object sender, RoutedEventArgs e)
{
Main.Content = new Optimizer();
}
In that case the two views appear on same page instead of switching completely.
Its not the case im looking for. I need the whole window to change and not leave behind a stackpanel.
Any simple example would be appreciated.
First thing to mention here is that pages and frames are rarely used by commercial teams. At least not in my experience.
Unless writing xbap - which is wpf in a browser.
I suggest you consider usercontrols rather than pages and host them in contentcontrols.
You can then have something like:
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button Click="Button_Click"/>
</Grid>
</Window>
Click handler:
private void Button_Click(object sender, RoutedEventArgs e)
{
this.Content = new UserControl1();
}
That makes the entire content of mainwindow an instance of UserControl1.
A Window inherits from contentcontrol.
You should also have learning mvvm on your list.
You should learn that. Maybe not right now, but soon.
I am experimenting with the Zoombox control from Xceed, but I am having trouble getting it to respond to mouse wheel or pan events. Nothing happens when I use these inputs. Am I missing something in my code or configuration?
https://github.com/xceedsoftware/wpftoolkit
<Window x:Class="UI.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
mc:Ignorable="d"
Title="MainWindow" Height="800" Width="700">
<Grid>
<xctk:Zoombox MinScale="0.5" MaxScale="100" >
<Grid Width="600" Height="400" Background="Yellow">
<Ellipse Fill="Blue" />
</Grid>
</xctk:Zoombox>
</Grid>
</Window>
You have to define DragModifiers and ZoomModifiers. Default values are Ctrl and Shift keys. So use the combination Shift+MouseWheel for zooming and use Ctrl+LeftButton for panning.
I created Wpf UserControl and am hosting it in WinForm.
<UserControl x:Class="Sapphire.WpfUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Height="527" Width="992">
<Canvas x:Name="videoCanvas" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" >
<Label Canvas.ZIndex="2" Content="Label" Canvas.Left="165" Canvas.Top="50" Width="125" Foreground="#FFFFFEFF"/>
<MediaElement x:Name="videoElement" Canvas.ZIndex="1" Canvas.Left="10" Canvas.Top="10" />
</Canvas>
As shown in designer file this WPF control is hosted through HostElement:
//
// elementHost1
//
this.elementHost1.Dock = System.Windows.Forms.DockStyle.Fill;
this.elementHost1.Location = new System.Drawing.Point(0, 0);
this.elementHost1.Name = "elementHost1";
this.elementHost1.Size = new System.Drawing.Size(1130, 593);
this.elementHost1.TabIndex = 2;
this.elementHost1.Text = "elementHost1";
this.elementHost1.Child = this.wpfUserControl1;
So it looks all correct. You also can see that the DockStyle is Fill.
However, the WPF control does not fill the entire WinForm and always shows up of a size as set and displayed in Designer.
I removed the Height and Width both from Canvas and from MediaElement that Canvas contains but it did not have any effect...
I'd appreciate if somebody can point out what I am doing wrong here - I am new to WPF.
You need to remove the Width and Height of the <UserControl> so that the containing ElementHost controls the size of the contained elements:
<UserControl x:Class="Sapphire.WpfUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d">
If you want a specific size in the designer, you can use d:DesignHeight and d:DesignWidth attributes:
<UserControl x:Class="Sapphire.WpfUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" d:DesignHeight="527" d:DesignWidth="992">
I am trying to load an image into my Silverlight project and I have the following XAML:
<UserControl x:Class="SilverlightApplication1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
<Grid x:Name="LayoutRoot" Background="White">
<Image Height="150" Width="200" Source="http://wsf.cdyne.com/WeatherWS/Images/rain.gif" />
</Grid>
</UserControl>
The Image control in Silverlight only supports PNG and JPEG, not GIF.
http://msdn.microsoft.com/en-us/library/system.windows.controls.image(VS.95).aspx