Programmatically Create Grid with Custom Element

Question

I'm trying to create a grid programmatically and appending a custom control as a child to the grid as row 0 column 0 out of a 2x2 matrix. To make matters more tricky, I'm using the MVVM design pattern. Heres some code to help everyone get the idea:

App.xaml.cs

base.OnStartup(e);
var viewModel = new MainWindowViewModel();
var mainWindow = new MainWindow();
mainWindow.GridWindows = viewModel.Window.GridWindows;

MainWindowViewModel - method returns the GridWindows.

    private Grid CreateGrid()
    {
        Grid grid = new Grid();

        // Create column definitions.
        ColumnDefinition columnDefinition1 = new ColumnDefinition();
        ColumnDefinition columnDefinition2 = new ColumnDefinition();
        columnDefinition1.Width = new GridLength(640);
        columnDefinition2.Width = new GridLength(640);

        // Create row definitions.
        RowDefinition rowDefinition1 = new RowDefinition();
        RowDefinition rowDefinition2 = new RowDefinition();
        rowDefinition1.Height = new GridLength(340);
        rowDefinition2.Height = new GridLength(340);

        // Attached definitions to grid.
        grid.ColumnDefinitions.Add(columnDefinition1);
        grid.ColumnDefinitions.Add(columnDefinition2);
        grid.RowDefinitions.Add(rowDefinition1);
        grid.RowDefinitions.Add(rowDefinition2);

        // Create preview window.
        Border border = new Border();
        border.BorderThickness = new Thickness(20);
        border.Padding = new Thickness(8);
        border.SetResourceReference(Control.BackgroundProperty, "PreviewWindow");

        MediaRTSPElement previewElement = new MediaRTSPElement();
        previewElement.Name = "RTSPStreamPlayer";
        previewElement.Stretch = Stretch.UniformToFill;
        previewElement.Source = "rtsp://192.100.100.22/media/video1";
        previewElement.VideoRenderer = VideoRendererType.EnhancedVideoRenderer;
        previewElement.LoadedBehavior = WPFEVR.DirectShow.Players.MediaState.Play;
        previewElement.SpeedRatio = 0.5;

        //border.Child = previewElement;

        // Add preview window.
        for (int i = 0; i < 4; i++)
        {
            grid.Children.Add(previewElement as UIElement);
            Grid.SetColumn(previewElement, i);
            Grid.SetRow(previewElement, i);
            break;
        }

        return grid;
    }

And the XAML Markup that the grid should assign to

<Grid x:Name="GridWindows"></Grid>

The problem is my custom control does not appear in the grid layout, heres the xaml code that does it without code-behind, and this does work:

        <Grid x:Name="GridWindows">
            <!--<Grid.ColumnDefinitions>
                <ColumnDefinition Width="640" />
                <ColumnDefinition Width="640" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="340" />
                <RowDefinition Height="340" />
            </Grid.RowDefinitions>
            <Border BorderThickness="20" Padding="8" Background="{DynamicResource ResourceKey=PreviewWindow}" Grid.Row="0" Grid.Column="0">
                <evr:MediaRTSPElement x:Name="RTSPStreamPlayer"
                              Stretch="UniformToFill"
                              VideoRenderer="EnhancedVideoRenderer"
                              LoadedBehavior="Play"
                              Source="rtsp://192.100.100.22/media/video1"
                              SpeedRatio="0.5" />
            </Border>
            <Border BorderThickness="20" Padding="8" Background="{DynamicResource ResourceKey=PreviewWindow}" Grid.Row="0" Grid.Column="1">
                <evr:MediaRTSPElement x:Name="RTSPStreamPlayer2"
                              Stretch="UniformToFill"
                              VideoRenderer="EnhancedVideoRenderer"
                              LoadedBehavior="Play"
                              Source="rtsp://192.100.100.78/media/video1"
                              SpeedRatio="0.5" />
            </Border>
            <Border BorderThickness="20" Padding="8" Background="{DynamicResource ResourceKey=PreviewWindow}" Grid.Row="1" Grid.Column="0">
                <evr:MediaRTSPElement x:Name="RTSPStreamPlayer3"
                              Stretch="UniformToFill"
                              VideoRenderer="EnhancedVideoRenderer"
                              LoadedBehavior="Play"
                              Source="rtsp://192.100.100.78/media/video1"
                              SpeedRatio="0.5" />
            </Border>
            <Border BorderThickness="20" Padding="8" Background="{DynamicResource ResourceKey=PreviewWindow}" Grid.Row="1" Grid.Column="1">
                <evr:MediaRTSPElement x:Name="RTSPStreamPlayer4"
                              Stretch="UniformToFill"
                              VideoRenderer="EnhancedVideoRenderer"
                              LoadedBehavior="Play"
                              Source="rtsp://192.100.100.22/media/video1"
                              SpeedRatio="0.5" />
            </Border>-->
        </Grid>

Any ideas as to why programmatic code isn't working?

Standard mvvm design call the MainWindowViewModel constructor to pull in the appropriate properties, the GridWindows property stores the returned grid from the method above - window = new Models.MainWindow { Layout = 1, GridWindows = CreateGrid() }; — bl4kh4k
– bl4kh4k, Commented Sep 13, 2011 at 16:41
It looks like there are quite a few things wrong with your code. In MVVM you shouldn't be creating UI controls in the ViewModel. What was the matter with the way you had it - defining the grid in the xaml? — kevev22
– kevev22, Commented Sep 13, 2011 at 16:50
I assumed thats where I messed up, was MVVM, but I'm not doing it through xaml because the grid can change based on 4 buttons that change it's layout and essentially pulls in a video stream per grid location. — bl4kh4k
– bl4kh4k, Commented Sep 13, 2011 at 17:11
Seems to be my custom control, I removed the ui method out of the viewmodel, your right it doesn't belong there... but I have it working to displays elements, my custom control seems to be the culprit... but weird that it works in xaml and not in code behind. Any ideas? — bl4kh4k
– bl4kh4k, Commented Sep 13, 2011 at 17:26

Piotr Auguscik · Accepted Answer · 2011-09-13 17:00:35Z

7

if you're creating Grid in the xaml you can't later set it in code. Grid (instance) is already in visualtree. Overwriting variable won't do any effect. You should set your Grid as content of xaml defined control. I'm guessing that your code looks like this:

Code:

this.GridWindows = createdGrid;

Xaml:

<Grid x:Name="GridWindows"></Grid>

In code you should have something like this:

this.GridWindows.Children.Add(createdGrid);

edited Sep 13, 2011 at 17:00

answered Sep 13, 2011 at 16:53

Piotr Auguscik

3,6911 gold badge25 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Programmatically Create Grid with Custom Element

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related