Fill Region with View containing MediaElement

Topics: Prism v2 - WPF 3.5
Sep 14, 2009 at 1:37 AM

 

Hi All,

I'm inserting a view that contains a MediaElement into a region in the shell and I want the view to fill the entire region.  Can someone please look at the XAML below and tell me why it's not filling the whole region.  Thanks.

XAML for the Shell Region-

 

 

 

 

 

<font size="2" color="#0000ff"><font size="2" color="#0000ff">

<

</font></font><font size="2" color="#0000ff">

 

</font>

Border Margin="2,2,8,8" Grid.Column="2" Grid.Row="1" BorderThickness="2,2,2,2" CornerRadius="4,4,4,4" BorderBrush="#FF929D31" Grid.RowSpan="2">

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

<ItemsControl DockPanel.Dock="Top" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" prismrgn:RegionManager.RegionName="MainRegion">

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

<ItemsControl.ItemsPanel>

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

<ItemsPanelTemplate>

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

<DockPanel/>

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

</ItemsPanelTemplate>

</ItemsControl.ItemsPanel> <font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

</ItemsControl> </Border>

 

XAML for the View -

<UserControl x:Class="Prism.Rocky.Player.Views.MediaPlayerView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:prism="clr-namespace:Microsoft.Practices.Composite.Presentation.Commands;assembly=Microsoft.Practices.Composite.Presentation"
    HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto">


    <Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto">
     <Grid.Background>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
       <GradientStop Color="#FF9CA48A"/>
       <GradientStop Color="#FFFFFFFF" Offset="1"/>
       <GradientStop Color="#FF90A85C" Offset="0.5"/>
      </LinearGradientBrush>
     </Grid.Background>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto">
            <MediaElement
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" 
            Grid.Row="0"
            Grid.Column="0"
            Name="me1"
            ScrubbingEnabled="True"     
            Source="C:\Users\Jeff\Documents\Visual Studio 2008\Projects\Prism.Rocky.Shell\Butterfly.wmv"
            Volume="10">
                <MediaElement.Triggers>
                    <EventTrigger RoutedEvent="MediaElement.Loaded">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <MediaTimeline Source="C:\Users\Jeff\Documents\Visual Studio 2008\Projects\Prism.Rocky.Shell\Butterfly.wmv" Storyboard.TargetName="me1" RepeatBehavior="Forever" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </MediaElement.Triggers>
            </MediaElement>
        </StackPanel>
       
       
    </Grid>

</UserControl>

Sep 14, 2009 at 9:44 PM

Hi

I was able to reproduce your situation and with some modifications I was able to get the required behavior. After a couple of times running the application, I realized that:

  • The View was not being filled by the MediaElement
  • The View was filling the Region

This was because setting the Width and Height properties to "Auto" cancels setting the Horizontal/Vertical alignment to Stretch. Also, the fact that you were using a StackPanel instead of a Grid as a parent for the media element was not allowing the MediaElement to properly fill the view (using a StackPanel would fill the view, but in a wrong way).

I also noticed that you are setting DockPanel.Dock="Top" in the ItemsControl located in the Shell. Notice that this attached property is only useful when the parent of the element you set it is a DockPanel.

The outcome code for the view is the following:

<UserControl x:Class="HelloWorldModule.Views.HelloWorldView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<
Grid x:Name="LayoutRoot" >
<
Grid.Background>
<
LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<
GradientStop Color="#FF9CA48A"/>
<
GradientStop Color="#FFFFFFFF" Offset="1"/>
<
GradientStop Color="#FF90A85C" Offset="0.5"/>
</
LinearGradientBrush>
</
Grid.Background>
<
Grid>
<
MediaElement
LoadedBehavior="Play" Stretch="Fill"
Grid.Row="0"
Grid.Column="0"
Name="me1"
ScrubbingEnabled="True"
Source="PathHere"
Volume="10">
<
MediaElement.Triggers>
<
EventTrigger RoutedEvent="MediaElement.Loaded">
<
EventTrigger.Actions>
<
BeginStoryboard>
<
Storyboard>
<
MediaTimeline Source="PathHere" Storyboard.TargetName="me1" RepeatBehavior="Forever" />
</
Storyboard>
</
BeginStoryboard>
</
EventTrigger.Actions>
</
EventTrigger>
</
MediaElement.Triggers>
</
MediaElement>
</
Grid>
</
Grid>
</
UserControl>

The following post from Ezequiel Jadib, provides some more information about Layout in WPF. You might find it useful:

Please let me know if this helps.

Damian Schenkelman
http://blogs.southworks.net/dschenkelman

 

Sep 14, 2009 at 11:00 PM

Awesome.  It works like a charm.  Thanks a bunch.

Jul 13, 2010 at 8:44 AM
Hi, i have another problem I am using silverlight 4 prism when i add MediaElement or mediaplayer in my module it not display any vedio and also with mediaplayer it dont load any silverlight control. Please solve this problem. <Grid x:Name="PlayerGamesRoot" Background="White" Margin="0,16,48,-88"> <Rectangle Fill="#FF04040E" Margin="0,-16,-48,0" Stroke="Black" RadiusX="25" RadiusY="25" RenderTransformOrigin="0.486,0.394"/> <StackPanel Height="24" Margin="0,0,-48,72" VerticalAlignment="Bottom" Background="#FF3D3737" RenderTransformOrigin="0.5,-1" Orientation="Horizontal"> <TextBlock Text="England 1.56" Margin="20,0,0,0" Foreground="#FF52ED28" FontSize="16"/> <TextBlock Text="Draw 1.02" Margin="100,0,0,0" Foreground="#FF60D83F" FontSize="16"/> <TextBlock Text="2.56 R. USA" Margin="120,0,0,0" Foreground="#FFE9180E" FontSize="16" Width="73"/> </StackPanel> <Grid Height="32" Margin="0,0,-48,24" VerticalAlignment="Bottom" Background="#FF5A5454"> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.452*"/> <ColumnDefinition Width="0.548*"/> </Grid.ColumnDefinitions> <StackPanel HorizontalAlignment="Left" Width="112" Background="#FF624D4D" Margin="0,0,0,-16"> <StackPanel Height="24" VerticalAlignment="Top" Orientation="Horizontal"> <Button Width="24" Margin="5,4,0,4"/> <Button Width="24" Margin="3,4,0,4"/> <Button Width="24" Margin="3,4,0,4"/> <Button Width="24" Margin="3,4,0,4"/> </StackPanel> <StackPanel Height="24" Orientation="Horizontal" RenderTransformOrigin="0.154,0.667"> <Button x:Name="SpeakerButton" Width="20" Height="20" Margin="5,0,0,0"> </Button> <Slider Margin="40,0,0,0"></Slider> </StackPanel> </StackPanel> <StackPanel Margin="-96,8,120,-16" Background="Black" Grid.Column="1"/> <StackPanel HorizontalAlignment="Right" Width="56" Grid.Column="1" Margin="0,0,8,0"/> </Grid> <StackPanel Margin="16,16,-24,112" Background="#FFA99292"> <MediaElement x:Name="mymediaplayer" Source="http://mschnlnine.vo.llnwd.net/d1/ch9/7/1/5/1/2/4/DynamicsDuoCRMSilverlight_ch9.wmv" AutoPlay="True"> </MediaElement> </StackPanel> </Grid> </UserControl>
Oct 15, 2010 at 8:33 PM
Edited Oct 15, 2010 at 8:34 PM

Hi,

I’ve tried to reproduce your problem using a MediaElement and it worked as expected using the code that you sent.

If you continue experiencing this error, could you please send us more context about the layout of your application (e.g. which region is this view inserted in).

Fernando Antivero
http://blogs.southworks.net/fantivero