Question

I have a StackPanel in my C# Metro app, using MVVM Light, that has several child controls on it. I want some of the child controls to use the main DataContext set for the View. But there's a few child controls that I want to point to a different DataContext. I don't want to add another StackPanel or other container control just to group the child controls by DataContext because that will create a big mess. What I would like is some "harmless" XAML element that accepts the DataContext attribute that I could use to group the controls in the manner desired. For example, suppose there was a hypothetical XAML element named GroupByDataContext, then my XAML code would look like that in the XAML block shown below. In this hypothetical example I would have two View Models named ViewModel1 and ViewModel2 and I would group them using the hypothetical GroupByDataContext element.

Is there a XAML element that serves this purpose? Or is there a whole other way to accomplish this task?

<StackPanel x:Name="stackTopRow" HorizontalAlignment="Left" Height="115" VerticalAlignment="Center" Width="1226" Grid.Column="1" Margin="10,15,0,10" Orientation="Horizontal">
    <GroupByDataContext DataContext="{Binding Source={StaticResource Locator}, Path=ViewModelName1}"
        <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}" Margin="10,0,60,0" VerticalAlignment="Center"/>
        <TextBlock TextWrapping="Wrap" x:Name="userName" Text="You're not signed in." FontSize="36" RenderTransformOrigin="-4.832,0.596" VerticalAlignment="Center"/>
    </GroupByDataContext>
    <GroupByDataContext DataContext="{Binding Source={StaticResource Locator}, Path=ViewModelName2}"
        <TextBlock TextWrapping="Wrap" Text="Search" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="36" Margin="0,39,0,38" Width="121" RenderTransformOrigin="-4.832,0.596" Visibility="Collapsed" />
        <TextBox x:Name="txtQuery" TextWrapping="Wrap" Text="TextBox" Width="605" Margin="0,36,0,35" VerticalAlignment="Center" FontSize="24" HorizontalAlignment="Right" Visibility="Collapsed"/>
        <Controls:ImageButton x:Name="btnSearch" Content="ImageButton" Width="79" Margin="0,36,0,38" VerticalAlignment="Center" Height="41" NormalStateImageSource="Assets/StoreLogo.png" Visibility="Collapsed"/>
    </GroupByDataContext>
</StackPanel>
Was it helpful?

Solution

You can use a normal Grid and set the DataContext on that. A Grid implicitly has one cell so you don't need to specify column or row definitions or explicitly place your child controls in any grid cell.

Keep in mind though that your StackPanel will now operate on the Grid as it's immediate child rather than the TextBlocks. This may not make any difference depending on your layout, but if it does then you may want to revert to using child StackPanels as @HighCore mentioned.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top