Bindind resources control with content control WPF - wpf

Question

I've just started learning WPF. However, now I'm having issues with my UI (which remains empty). This is the code I'm using; What I'm trying to do is to display the properties of the River in the UI.
<Window.Resources>
<local:River x:Key="theRiver" Name="Colorado River" MilesLong="1450" />
<StackPanel x:Key="stackey" DataContext="theRiver">
<StackPanel.Resources>
<DataTemplate x:Key="key" DataType="{x:Type local:River}" >
<Border x:Name="bdr" BorderBrush="Blue" BorderThickness="3" CornerRadius="12" Padding="2">
<Grid Margin="5">
<TextBlock x:Name="txt" FontFamily="Bookman old style">
<Run Text="The"/>
<TextBlock Text="{Binding Name}"/>
<Run Text="is"/>
<TextBlock Text="{Binding MilesLong}" />
<Run Text="miles long." />
</TextBlock>
</Grid>
</Border>
<DataTemplate.Triggers>
<Trigger SourceName="bdr" Property="IsMouseOver" Value="True">
<Setter TargetName="bdr" Property="Background" Value="Red"/>
<Setter TargetName="txt" Property="Foreground" Value="Green"/>
<Setter TargetName="bdr" Property="CornerRadius" Value="40"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</StackPanel.Resources>
</StackPanel>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!--<StackPanel Grid.Column="1" Grid.Row="1" Margin="10" Background="Gold" DataContext="{StaticResource theRiver}>-->
<ContentControl Content="{StaticResource ResourceKey=stackey}" Grid.Column="1" Grid.Row="1" Margin="10" Background="Gold" />
</Grid>

Answer 1

There are a few issues in your code.
<StackPanel x:Key="stackey" DataContext="theRiver">
<StackPanel.Resources>
<DataTemplate x:Key="key" DataType="{x:Type local:River}" >
Here you want to provide an unnamed DataTemplate for the type that will be loaded into the ContentControl. The StackPanel wrapper here is unnecessary, as is the x:Key on the DataTemplate.
<ContentControl Content="{StaticResource ResourceKey=stackey}"
This says that the source for the ContentControl's content is the StackPanel you declared in your resources, rather than an instance of River.
Corrected/working code looks like:
<Window.Resources>
<local:River x:Key="theRiver" Name="Colorado River" MilesLong="1450" />
<DataTemplate DataType="{x:Type local:River}">
<Border x:Name="bdr"
BorderBrush="Blue"
BorderThickness="3"
CornerRadius="12"
Padding="2">
<Grid Margin="5">
<TextBlock x:Name="txt" FontFamily="Bookman old style">
<Run Text="The" />
<TextBlock Text="{Binding Name}" />
<Run Text="is" />
<TextBlock Text="{Binding MilesLong}" />
<Run Text="miles long." />
</TextBlock>
</Grid>
</Border>
<DataTemplate.Triggers>
<Trigger SourceName="bdr" Property="IsMouseOver" Value="True">
<Setter TargetName="bdr" Property="Background" Value="Red" />
<Setter TargetName="txt" Property="Foreground" Value="Green" />
<Setter TargetName="bdr" Property="CornerRadius" Value="40" />
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!-- <StackPanel Grid.Column="1" Grid.Row="1" Margin="10" Background="Gold" DataContext="{StaticResource theRiver}> -->
<ContentControl Grid.Row="1"
Grid.Column="1"
Margin="10"
Background="Gold"
Content="{Binding Source={StaticResource theRiver}}" />
</Grid>

Answer 2

Just define the DataTemplate in Windows.Resources like below (remove the Stackpanel):
<DataTemplate x:Key="stackey" DataType="{x:Type local:River}" >
<Border x:Name="bdr" BorderBrush="Blue" BorderThickness="3" CornerRadius="12" Padding="2">
<Grid Margin="5">
<TextBlock x:Name="txt" FontFamily="Bookman old style">
<Run Text="The"/>
<TextBlock Text="{Binding Name}"/>
<Run Text="is"/>
<TextBlock Text="{Binding MilesLong}" />
<Run Text="miles long." />
</TextBlock>
</Grid>
</Border>
<DataTemplate.Triggers>
<Trigger SourceName="bdr" Property="IsMouseOver" Value="True">
<Setter TargetName="bdr" Property="Background" Value="Red"/>
<Setter TargetName="txt" Property="Foreground" Value="Green"/>
<Setter TargetName="bdr" Property="CornerRadius" Value="40"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
and then bind your ContentControl like
<ContentControl Grid.Column="1" Grid.Row="1" DataContext="{StaticResource theRiver}" Content="{StaticResource theRiver}" ContentTemplate="{StaticResource stackey}" Margin="10" Background="Gold" />