VideoCaptureElement inside UserControl

Jun 15, 2011 at 6:13 PM

Hi, I´m trying to use a VideoCaptureElement inside a UserControl, but when I run the application and I select the webcam nothing happens. Here's the code:

 

<UserControl x:Class="SiiaTablet.Views.Cadastro.QuestionarioEtapaFotos"
             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:h="clr-namespace:Hokafioz.Components;assembly=Hokafioz"            
             xmlns:ie="clr-namespace:ImageEditor;assembly=ImageEditor"
             xmlns:cam="clr-namespace:SiiaTablet.Camera"
             xmlns:local="clr-namespace:SiiaTablet.Views.Cadastro"
             mc:Ignorable="d"
             xmlns:WPFMediaKit="clr-namespace:WPFMediaKit.DirectShow.Controls;assembly=WPFMediaKit"
             d:DesignHeight="400" d:DesignWidth="500">

    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal">

            <Grid>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <ComboBox x:Name="camera" Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Source={x:Static WPFMediaKit:MultimediaUtil.VideoInputDevices}}" DisplayMemberPath="Name" Foreground="Black" VerticalAlignment="Bottom" Margin="8.514,0,0,11.335"/>

                <StackPanel x:Name="camContainer" Grid.Row="2" Grid.Column="0"  Width="320" Height="200" >
                    <WPFMediaKit:VideoCaptureElement Name="video" LoadedBehavior="Play" DesiredPixelHeight="240" DesiredPixelWidth="320" Width="320" Height="240" VideoCaptureDevice="{Binding Path=SelectedItem, ElementName=videoCapDevices}" FPS="30"/>
                </StackPanel>

                <Grid Grid.Row="6" Grid.Column="0">

    </Grid>

</UserControl>


I tried the same thing insde a Windo and works fine. The VideoCaptureElement does not work insde a UserControl?

 

Thanx.

 

ps. Forgive my horrible english.

 

 

<UserControl x:Class="SiiaTablet.Views.Cadastro.QuestionarioEtapaFotos"
             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:h="clr-namespace:Hokafioz.Components;assembly=Hokafioz"            
             xmlns:ie="clr-namespace:ImageEditor;assembly=ImageEditor"
             xmlns:cam="clr-namespace:SiiaTablet.Camera"
             xmlns:local="clr-namespace:SiiaTablet.Views.Cadastro"
             xmlns:j832="clr-namespace:J832.Wpf;assembly=J832.Wpf.BagOTricksLib"
             xmlns:atp="clr-namespace:Microsoft.Samples.KMoore.WPFSamples.AnimatingTilePanel;assembly=J832.Wpf.BagOTricksLib"
             mc:Ignorable="d"
             Loaded="UserControl_Loaded"
             xmlns:WPFMediaKit="clr-namespace:WPFMediaKit.DirectShow.Controls;assembly=WPFMediaKit"
             d:DesignHeight="400" d:DesignWidth="500">

    <UserControl.Resources>

        <cam:ThreeFourthConverter x:Key="ThreeFourthConverter"/>

        <Style x:Key="DefaultCapPlayer" TargetType="{x:Type cam:CapPlayer}">
            <Setter Property="Margin" Value="6"/>
        </Style>

        <Style x:Key="listBoxStyle">
            <Style.Resources>
                <!-- Background of selected item when focussed -->
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#D79470" />
                <!-- Background of selected item when not focussed -->
                <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
            </Style.Resources>
        </Style>

    </UserControl.Resources>

    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal">

            <Grid>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <TextBlock Grid.Row="0" Grid.Column="0" Text="Câmeras disponíveis"/>

                <ComboBox x:Name="camera" Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Source={x:Static WPFMediaKit:MultimediaUtil.VideoInputDevices}}" DisplayMemberPath="Name" Foreground="Black" VerticalAlignment="Bottom" Margin="8.514,0,0,11.335"/>

                <!--<ComboBox Grid.Row="1" Grid.Column="0" x:Name="webcamComboBox" ItemsSource="{x:Static cam:CapDevice.DeviceMonikers}" DisplayMemberPath="Name" SelectedValuePath="MonikerString" SelectedValue="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:QuestionarioEtapaFotos}}, Path=SelectedWebcamMonikerString}" Margin="10" />-->

                <!--<StackPanel x:Name="camContainer" Grid.Row="2" Grid.Column="0"  Width="320" Height="200" >-->
                    <!--<cam:CapPlayer x:Name="webcamPlayer" Stretch="Fill" Height="200" Width="320" Rotation="180" Device="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:QuestionarioEtapaFotos}}, Path=SelectedWebcam}" Style="{StaticResource DefaultCapPlayer}"></cam:CapPlayer>-->
                    <WPFMediaKit:VideoCaptureElement Name="video" LoadedBehavior="Play" DesiredPixelHeight="240" DesiredPixelWidth="320" Width="320" Height="240" VideoCaptureDevice="{Binding Path=SelectedItem, ElementName=videoCapDevices}" FPS="30"/>
                <!--</StackPanel>-->

                <!--<Button Grid.Row="3" Grid.Column="0" Name="captureImageNowButton" Width="32" Height="32" Command="cam:CaptureImageCommands.CaptureImage" HorizontalAlignment="Right">
                    <Image Source="/Images/CaptureImageNow.png"/>
                </Button>-->

                <!--<Image Grid.Row="2" Name="picture" Source="C:/siia/imagens/img.jpg" Width="320" Height="200"/> -->

                <Button Grid.Row="3" Grid.Column="0" Name="captureImageNowButton" Width="32" Height="32" HorizontalAlignment="Right" Click="btnFoto_Click">
                    <Image Source="/Images/CaptureImageNow.png"/>
                </Button>

                <StackPanel Grid.Row="4" Grid.Column="0">
                    <ie:ImageEditor Name="editor" Color="Red" CurrentFigure="Free" Width="320" Height="200"/>
                </StackPanel>

                <StackPanel Grid.Row="5" Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Center">

                    <Button Height="23" Name="btnPincel" Click="btnPincel_Click" ToolTip="Desenho livre">
                        <Button.Content>
                            <Image Source="/Images/pencil.png"/>
                        </Button.Content>
                    </Button>

                    <Button Height="23" Name="btnRetangulo" Click="btnRetangulo_Click" ToolTip="Desenhar retângulo">
                        <Button.Content>
                            <Image Source="/Images/rectangle.png"/>
                        </Button.Content>
                    </Button>

                    <Button Height="23" Name="btnElipse" Click="btnEllipse_Click" ToolTip="Desenhar elipse">
                        <Button.Content>
                            <Image Source="/Images/ellipse.png"/>
                        </Button.Content>
                    </Button>

                    <Button Height="23" Name="btnLimpar" Click="btnLimpar_Click" ToolTip="Descartar alterações">
                        <Button.Content>
                            <Image Source="/Images/trash.png"/>
                        </Button.Content>
                    </Button>

                </StackPanel>

                <Grid Grid.Row="6" Grid.Column="0">

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock Text="Descrição (*)" Grid.Column="0" VerticalAlignment="Center" Margin="0,0,5,0" IsManipulationEnabled="True" />
                    <h:ExtendedTextBox Name="tbDescricao" Grid.Column="1" AcceptsReturn="True" Width="320" Height="Auto" Margin="0,0,5,0" />
                    <StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Center">

                        <Button Name="btnAdd" Width="32" Height="32" Click="btnAdd_Click" ToolTip="Adicionar imagem">
                            <Button.Content>
                                <Image Source="/Images/add.png" Width="32" Height="32" Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Button.Content>
                        </Button>

                    </StackPanel>

                </Grid>

            </Grid>

            <StackPanel>
                <GroupBox Header="Imagens Adicionadas" Height="Auto" Margin="10" MaxHeight="550" MinHeight="64" VerticalAlignment="Top" BorderThickness="2,2,2,2" BorderBrush="LightGray">
                    <ListBox Name="listImages" ItemsSource="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:QuestionarioEtapaFotos}}, Path=Images}" MaxHeight="550" Height="Auto" Width="200" Background="Transparent" BorderThickness="0" Style="{StaticResource listBoxStyle}">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal" Margin="5">
                                    <Image Source="{Binding Path=Imagem}" Margin="3"/>
                                    <TextBlock FontSize="10" FontWeight="Bold" Text="{Binding Path=Text}"/>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </GroupBox>
                <Button Name="removeImage" Width="32" Height="32" HorizontalAlignment="Left" Margin="10,0,0,0" Click="removeImage_Click" ToolTip="Remove a imagem selecionada">
                    <Image Source="/Images/minus.png"/>
                </Button>
            </StackPanel>

        </StackPanel>

        <Button Name="btnFinalizar" Content="Finalizar" HorizontalAlignment="Right" Grid.Row="1" Width="100" Height="30" Margin="10,10,10,10"/>

    </Grid>

</UserControl>
Jun 29, 2011 at 11:18 AM

Hello ,

I have to develop a wpf application which takes live video rom tv tuner or web cam.Although ı add references ,at the xaml side, "<WPFMediaKit" doesn't come .

Please help me,I have a little time to finish this work.

Thanks..