WPF UserControl不显示

Question

Have been trying for a few hours to understand why my UserControl isnt showing up. It works in the designer, and works if i just make one locally:

<local:CurrentlySelectedServerUserControl Grid.Row="1" />

Next, I created a DataTemplate for the ViewModel which I wish to display. This ViewModel is the DataContext of the UserControl. I add a ContentControl and set its Content property to the Binding.

<DataTemplate DataType="{x:Type local:CurrentlySelectedServerViewModel}">
    <local:CurrentlySelectedServerUserControl />
</DataTemplate>

<ContentControl Content="{Binding CurrentlySelectedServer}" Grid.Row="1"/>

The Code behind here is:

protected CurrentlySelectedServerViewModel _currentlySelectedServer;
public CurrentlySelectedServerViewModel CurrentlySelectedServer
{
    get { return _currentlySelectedServer; }
    set { _currentlySelectedServer = value; }
}

So to my understanding, this should have created the ContentControl, bound to the property that holds a CurrentlySelectedServerViewModel. When it knows that, it looks up the DataTemplate for the ViewModel, and should draw the UserControl.

Am I missing something?

I know the initialisation of my data works because above it I have a simple ListView bound to a property of the same ViewModel, TheServers. It is printing the Server Names in the list box.

MainWindow.xaml

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:VpnClient" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:VpnClient_ViewModels="clr-namespace:VpnClient.ViewModels" mc:Ignorable="d"
x:Class="VpnClient.MainWindow"
x:Name="Window" 
Title="MainWindow"
Width="350" Height="480" Background="{x:Null}" Loaded="Window_Loaded">

<Window.DataContext>
    <VpnClient_ViewModels:VpnClientMainWindowViewModel x:Name="VpnClientMainWindowViewModel"/>
</Window.DataContext>

<Window.Resources>
</Window.Resources>

<Grid x:Name="LayoutRoot" Background="#FF003349">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="0.731*"/>
        <RowDefinition Height="0.205*"/>
        <RowDefinition Height="0.064*"/>
    </Grid.RowDefinitions>

    <Label Content="Title"
        Margin="8,8,8,0" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center" 
        Background="{x:Null}" 
        Foreground="White" 
        FontSize="24"/>

    <Grid Grid.Row="1" Background="#FF054160">
        <Grid.RowDefinitions>
            <RowDefinition Height="0.726*"/>
            <RowDefinition Height="0.274*"/>
        </Grid.RowDefinitions>
        <Grid.Resources>
            <DataTemplate DataType="{x:Type local:CurrentlySelectedServerViewModel}">
                <local:CurrentlySelectedServerUserControl />
            </DataTemplate>
        </Grid.Resources>
        <ListBox Margin="5" ItemsSource="{Binding TheServers}" DisplayMemberPath="Name" Grid.Row="0"/>

        <ContentControl 
           Content="{Binding Path=CurrentlySelectedServer}"
            Grid.Row="1"/>

    </Grid>

    <Button x:Name="connectButton" Content="Connect" 
        Margin="10,0" 
        Grid.Row="2" 
        VerticalAlignment="Center" BorderThickness="0" Height="35">
        <Button.Background>
            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FF00FF61" Offset="0"/>
                <GradientStop Color="#FF07A996" Offset="0.259"/>
                <GradientStop Color="#FF006C38" Offset="1"/>
            </LinearGradientBrush>
        </Button.Background>
    </Button>

</Grid>

MainWindow.Xaml.cs

public partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();

        // Insert code required on object creation below this point.
        var perthServer = new ServerModel {
            Name = "Perth",
            Hostname = "localhost",
            Ip = "127.0.0.1",
            Latency = 0
        };

        var sydneyServer = new ServerModel {
            Name = "Sydney",
            Hostname = "localhost",
            Ip = "127.0.0.1",
            Latency = 0
        };

        VpnClientMainWindowViewModel.TheServers.Add(perthServer);
        VpnClientMainWindowViewModel.TheServers.Add(sydneyServer);

        VpnClientMainWindowViewModel.CurrentlySelectedServer = new CurrentlySelectedServerViewModel
        {
            CurrentlySelectedServerModel = VpnClientMainWindowViewModel.TheServers[0]
        };

    }
}

VpnClientMainWindowViewModel.cs

public class VpnClientMainWindowViewModel
{

    public VpnClientMainWindowViewModel() { }

    protected List<ServerModel> _theServers = new List<ServerModel>();
    protected CurrentlySelectedServerViewModel _currentlySelectedServer;

    public List<ServerModel> TheServers
    {
        get { return _theServers; }
        set { _theServers = value; }
    }

    public CurrentlySelectedServerViewModel CurrentlySelectedServer
    {
        get { return _currentlySelectedServer; }
        set { _currentlySelectedServer = value; }
    }
}

CurrentlySelectedServerUserControl.xaml

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:VpnClient"
mc:Ignorable="d"
x:Class="VpnClient.CurrentlySelectedServerUserControl"
x:Name="UserControl"
d:DesignWidth="350" d:DesignHeight="80" HorizontalAlignment="Center" VerticalAlignment="Center">
<UserControl.Resources>
    <Style x:Key="CurrentlySelectedServerViewModelTitleStyle" TargetType="{x:Type Label}">
        <Setter Property="Background" Value="{x:Null}"/>
        <Setter Property="Foreground" Value="#FF52AAC0"/>
    </Style>
    <Style x:Key="CurrentlySelectedServerViewModelDataTextStyle" TargetType="{x:Type Label}">
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="FontSize" Value="16"/>
    </Style>
</UserControl.Resources>
<UserControl.DataContext>
    <local:CurrentlySelectedServerViewModel/>
</UserControl.DataContext>

<Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="0.479*"/>
    </Grid.RowDefinitions>
    <Grid HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <Label Content="Location:" HorizontalAlignment="Left" VerticalAlignment="Bottom" Grid.Column="1" Style="{DynamicResource CurrentlySelectedServerViewModelTitleStyle}"/>
    <Label Content="Ping:" HorizontalAlignment="Left" Margin="0" d:LayoutOverrides="Height" Grid.Column="3" VerticalAlignment="Bottom" Style="{DynamicResource CurrentlySelectedServerViewModelTitleStyle}"/>
    <Image HorizontalAlignment="Center" Height="35" Source="/VpnClient;component/Images/vpnclient_location.png" Stretch="Fill" VerticalAlignment="Center" Width="27" Grid.RowSpan="2"/>
    <Image Margin="0" Source="/VpnClient;component/Images/vpnclient_ping.png" Stretch="Fill" Grid.RowSpan="2" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Height="34" Width="45"/>
    <Label Content="{Binding CurrentlySelectedServerModel.Name}" Margin="0" d:LayoutOverrides="Width, Height" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{DynamicResource CurrentlySelectedServerViewModelDataTextStyle}"/>
    <Label Content="{Binding CurrentlySelectedServerModel.Latency}" Margin="0,0,12.006,0" d:LayoutOverrides="Width, Height" Grid.Row="2" Grid.Column="3" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{DynamicResource CurrentlySelectedServerViewModelDataTextStyle}"/>
</Grid>

Answer 1

It is about the binding. Refer the below code. MainWindow.XAML

<Window x:Class="ComboStr_Learning.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComboStr_Learning"
    Title="Window1" Height="300" Width="300" >
<Window.DataContext>
    <local:VpnClientMainWindowViewModel x:Name="VpnClientMainWindowViewModel"/>
</Window.DataContext>

<Window.Resources>
</Window.Resources>

<Grid x:Name="LayoutRoot" Background="#FF003349">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="0.731*"/>
        <RowDefinition Height="0.205*"/>
        <RowDefinition Height="0.064*"/>
    </Grid.RowDefinitions>

    <Label Content="Title"
    Margin="8,8,8,0" 
    VerticalAlignment="Center" 
    HorizontalAlignment="Center" 
    Background="{x:Null}" 
    Foreground="White" 
    FontSize="24"/>

    <Grid Grid.Row="1" Background="#FF054160">
        <Grid.RowDefinitions>
            <RowDefinition Height="0.726*"/>
            <RowDefinition Height="0.274*"/>
        </Grid.RowDefinitions>
        <Grid.Resources>
            <DataTemplate DataType="{x:Type local:CurrentlySelectedServerViewModel}">
                <local:CurrentlySelectedServerUserControl />
            </DataTemplate>
        </Grid.Resources>
        <ListBox Margin="5" ItemsSource="{Binding TheServers}" SelectedItem="{Binding CurrentlySelectedServer.CurrentlySelectedServerModel}" DisplayMemberPath="Name" Grid.Row="0"/>

        <ContentControl 
       Content="{Binding Path=CurrentlySelectedServer}"
        Grid.Row="1"/>

    </Grid>

    <Button x:Name="connectButton" Content="Connect" 
    Margin="10,0" 
    Grid.Row="2" 
    VerticalAlignment="Center" BorderThickness="0" Height="35">
        <Button.Background>
            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FF00FF61" Offset="0"/>
                <GradientStop Color="#FF07A996" Offset="0.259"/>
                <GradientStop Color="#FF006C38" Offset="1"/>
            </LinearGradientBrush>
        </Button.Background>
    </Button>

</Grid>

Window.cs

 public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();
        // Insert code required on object creation below this point.           
    }       
}

VpnClientMainWindowViewModel

public class VpnClientMainWindowViewModel
{
    public VpnClientMainWindowViewModel() {

        var perthServer = new ServerModel
        {
            Name = "Perth",
            Hostname = "localhost",
            Ip = "127.0.0.1",
            Latency = 0
        };

        var sydneyServer = new ServerModel
        {
            Name = "Sydney",
            Hostname = "localhost",
            Ip = "127.0.0.1",
            Latency = 0
        };

        this.TheServers.Add(perthServer);
        this.TheServers.Add(sydneyServer);

        this.CurrentlySelectedServer = new CurrentlySelectedServerViewModel
        {
            CurrentlySelectedServerModel = this.TheServers[0]
        };
    }

    private List<ServerModel> _theServers = new List<ServerModel>();
    private CurrentlySelectedServerViewModel _currentlySelectedServer;

    public List<ServerModel> TheServers
    {
        get { return _theServers; }
        set { _theServers = value; }
    }

    public CurrentlySelectedServerViewModel CurrentlySelectedServer
    {
        get { return _currentlySelectedServer; }
        set { _currentlySelectedServer = value; }
    }
}

public class CurrentlySelectedServerViewModel
{
    private ServerModel _CurrentlySelectedServerModel;

    public ServerModel CurrentlySelectedServerModel
    {
        get { return _CurrentlySelectedServerModel; }
        set { _CurrentlySelectedServerModel = value; }
    }        
}

public class ServerModel
{
    private string name;

    public string Name
    {
        get { return name; }
        set { name = value; }
    }

    private string hostName;

    public string Hostname
    {
        get { return hostName; }
        set { hostName = value; }
    }

    private string ip;

    public string Ip
    {
        get { return ip; }
        set { ip = value; }
    }

    private int latency;

    public int Latency
    {
        get { return latency; }
        set { latency = value; }
    }

}