UWP: Binding Multiple Copies of a UserControl In One View

Question

I have created a UserControl that has four text boxes. The UserControl will be used to show data from three different sources. So far, I cannot get the plumbing back to the UI to work.

Here is the basic setup:

MyUserControl.xaml

Bindings to each text box

MyUserControl.xaml.cs

Dependency Properties for the text boxes
Property Wrappers {get;set;} for the text boxes

MyViewModel.cs

Properties for each text box

MyView.xaml

UserControl1 {bindings to UserControl1 properties in MyViewModel}
UserControl2 {bindings to UserControl2 properties in MyViewModel}
UserControl3 {bindings to UserControl3 properties in MyViewModel}

This worked great for one user control, but when I have three I receive binding errors and the text boxes do not update. I removed the bindings from MyUserControl which fixed the error, but I do not see data in the text boxes (I have verified in the debugger that data is getting to MyView). Is what I am doing even possible in UWP and if so, how do I bind to three copies of the same UserControl? I have read the Microsoft docs on binding, but I have not run across multiple binding to the same UserControl.

   public partial class PositionView : UserControl
   {

      // To be able to bind to PositionView content from another UI, PositionView's content is  
      // registered as DependencyProperties.
      #region DependencyPropertyIdentifiers
      public static readonly DependencyProperty LatitudeProperty =
         DependencyProperty.Register("Latitude", typeof(float), typeof(PositionView), null);

      public static readonly DependencyProperty LongitudeProperty =
         DependencyProperty.Register("Longitude", typeof(float), typeof(PositionView), null);

      public static readonly DependencyProperty ElevationProperty =
         DependencyProperty.Register("Elevation", typeof(float), typeof(PositionView), null);

      public static readonly DependencyProperty SatelliteCountProperty =
         DependencyProperty.Register("SatelliteCount", typeof(int), typeof(PositionView), null);

      public static readonly DependencyProperty MGRSProperty =
         DependencyProperty.Register("MGRS", typeof(string), typeof(PositionView), null);
      #endregion


      // Specific Getters/Setters for the DependencyProperties using GetValue/SetValue
      #region PropertyWrappers
      public float Latitude
      {
         get { return (float)GetValue(LatitudeProperty); }
         set { SetValue(LatitudeProperty, value); }
      }

      public float Longitude
      {
         get { return (float)GetValue(LongitudeProperty); }
         set { SetValue(LongitudeProperty, value); }
      }

      public float Elevation
      {
         get { return (float)GetValue(ElevationProperty); }
         set { SetValue(ElevationProperty, value); }
      }

      public string MGRS
      {
         get { return (string)GetValue(MGRSProperty); }
         set { SetValue(MGRSProperty, value); }
      }

      public float SatelliteCount
      {
         get { return (int)GetValue(SatelliteCountProperty); }
         set { SetValue(SatelliteCountProperty, value); }
      }
      #endregion


<UserControl
    x:Class="HHPM_NEXT.Views.PositionView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HHPM_NEXT.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="200"
    d:DesignWidth="460"
    FontSize="26">

    <UserControl.Resources>
        <Style TargetType="TextBox">
            <Setter Property="Margin" Value="3"/>
        </Style>
    </UserControl.Resources>
    <Grid HorizontalAlignment="Stretch">

        <!--<Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width=".5*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width=".5*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
      </Grid.RowDefinitions>-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>


        <!--<TextBlock Grid.Row="0" Grid.Column="0" Text="Latitude" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource MessageText}"/>-->
        <TextBox Header="Latitutde" x:Name="LatitudeTextBox" Grid.Row="0" Grid.Column="0"  HorizontalAlignment="Stretch" />

        <!--<TextBlock Grid.Row="1" Grid.Column="0" Text="Longitude" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource MessageText}"/>-->
        <TextBox Header="Longitude" x:Name="LongitudeTextBox" Grid.Row="0" Grid.Column="1"  HorizontalAlignment="Stretch" />

        <!--<TextBlock Grid.Row="2" Grid.Column="0" Text="Elevation" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource MessageText}"/>-->
        <TextBox Header="Elevation" x:Name="ElevationTextBox" Grid.Row="0" Grid.Column="2"  HorizontalAlignment="Stretch"  />

        <!--<TextBlock Grid.Row="0" Grid.Column="3" Text="MGRS" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource MessageText}"/>-->
        <TextBox Header="MGRS" x:Name="MGRSTextBox" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" IsReadOnly="True" HorizontalAlignment="Stretch" />

        <!--<TextBlock Grid.Row="1" Grid.Column="3" Text="Satellites" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource MessageText}"/>-->
        <TextBox Header="Satellites" x:Name="SatellitesTextBox" Grid.Row="1" Grid.Column="2" IsReadOnly="True" HorizontalAlignment="Stretch" />

   </Grid>


<Page
    x:Class="HHPM_NEXT.Views.EmplacementView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HHPM_NEXT"
    xmlns:views="using:HHPM_NEXT.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">


   <ScrollViewer>
      <UserControl>
         <Grid x:Name="EmplacementViewGrid">
               <VisualStateManager.VisualStateGroups>
                  <VisualStateGroup>
                     <VisualState x:Name="VerticalState">
                        <VisualState.StateTriggers>
                           <AdaptiveTrigger MinWindowWidth="0"/>
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                           <!--styles-->
                           <Setter Target="EmplacementViewGrid.Style" Value="{StaticResource VerticalStateGrid}"/>
                           <Setter Target="SavePositionButton.Style" Value="{StaticResource LargeButton}" />
                           <Setter Target="SendPositionTableButton.Style" Value="{StaticResource LargeButton}" />
                           <Setter Target="EditDevicePositionButton.Style" Value="{StaticResource LargeButton}" />
                           <Setter Target="DeleteAllPositionDataButton.Style" Value="{StaticResource LargeButton}" />

                           <!--positions-->
                           <Setter Target="DataAvailableBlock.(Grid.Row)" Value="6"/>
                           <Setter Target="SavePositionButton.(Grid.Row)" Value="7"/>
                           <Setter Target="SendPositionTableButton.(Grid.Row)" Value="8"/>
                           <Setter Target="EditDevicePositionButton.(Grid.Row)" Value="9"/>
                           <Setter Target="DeleteAllPositionDataButton.(Grid.Row)" Value="10"/>

                           <Setter Target="GPSARadioButton.(Grid.Column)" Value="0" />
                           <Setter Target="GPSARadioButton.(Grid.Row)" Value="0" />
                           <Setter Target="GPSAPositionView.(Grid.Column)" Value="0"/>
                           <Setter Target="GPSAPositionView.(Grid.Row)" Value="1"/>

                           <Setter Target="UbloxRadioButton.(Grid.Column)" Value="0" />
                           <Setter Target="UbloxRadioButton.(Grid.Row)" Value="2"/>
                           <Setter Target="UbloxPositionView.(Grid.Column)" Value="0"/>
                           <Setter Target="UbloxPositionView.(Grid.Row)" Value="3"/>

                           <Setter Target="ManualRadioButton.(Grid.Column)" Value="0" />
                           <Setter Target="ManualRadioButton.(Grid.Row)" Value="4"/>
                           <Setter Target="ManualPositionView.(Grid.Column)" Value="0"/>
                           <Setter Target="ManualPositionView.(Grid.Row)" Value="5"/>


                        </VisualState.Setters>
                     </VisualState>
                     <VisualState x:Name="HorizontalState">
                        <VisualState.StateTriggers>
                           <AdaptiveTrigger MinWindowWidth="641"/>
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                           <!--styles-->
                           <Setter Target="EmplacementViewGrid.Style" Value="{StaticResource HorizontalStateGrid}"/>
                           <Setter Target="SavePositionButton.Style" Value="{StaticResource LargeSquareButton}" />
                           <Setter Target="SendPositionTableButton.Style" Value="{StaticResource LargeSquareButton}" />
                           <Setter Target="EditDevicePositionButton.Style" Value="{StaticResource LargeSquareButton}" />
                           <Setter Target="DeleteAllPositionDataButton.Style" Value="{StaticResource LargeSquareButton}" />
                           <!--positions-->
                           <Setter Target="SavePositionButton.(Grid.Row)" Value="5"/>
                           <Setter Target="SavePositionButton.(Grid.Column)" Value="0"/>
                           <Setter Target="SendPositionTableButton.(Grid.Row)" Value="5"/>
                           <Setter Target="SendPositionTableButton.(Grid.Column)" Value="1"/>
                           <Setter Target="EditDevicePositionButton.(Grid.Row)" Value="5"/>
                           <Setter Target="EditDevicePositionButton.(Grid.Column)" Value="2"/>
                           <Setter Target="DeleteAllPositionDataButton.(Grid.Row)" Value="5"/>
                           <Setter Target="DeleteAllPositionDataButton.(Grid.Column)" Value="3"/>

                           <Setter Target="DeviceIdTextBox.(Grid.Column)" Value="1"/>
                           <Setter Target="DeviceIdTextBox.(Grid.Row)" Value="0"/>

                           <Setter Target="GPSARadioButton.(Grid.Column)" Value="0" />
                           <Setter Target="GPSAPositionView.(Grid.Row)" Value="3" />
                           <Setter Target="GPSAPositionView.(Grid.Column)" Value="0" />

                           <Setter Target="UbloxRadioButton.(Grid.Column)" Value="2" />
                           <Setter Target="UbloxPositionView.(Grid.Column)" Value="2" />
                           <Setter Target="UbloxPositionView.(Grid.Row)" Value="3" />

                           <Setter Target="ManualRadioButton.(Grid.Column)" Value="4" />
                           <Setter Target="ManualPositionView.(Grid.Column)" Value="4" />
                           <Setter Target="ManualPositionView.(Grid.Row)" Value="3" />

                           <Setter Target="GPSAPositionView.(Grid.ColumnSpan)" Value="1" />
                           <Setter Target="UbloxPositionView.(Grid.ColumnSpan)" Value="1" />
                           <Setter Target="ManualPositionView.(Grid.ColumnSpan)" Value="1" />

                           <Setter Target="DataAvailableBlock.(Grid.Row)" Value="4" />
                           <Setter Target="DataAvailableBlock.(Grid.Column)" Value="1" />
                           <Setter Target="DataAvailableBlock.(Grid.ColumnSpan)" Value="2" />
                        </VisualState.Setters>
                     </VisualState>
                  </VisualStateGroup>
               </VisualStateManager.VisualStateGroups>


               <Grid.ColumnDefinitions>

                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="Auto"/>
               </Grid.ColumnDefinitions>
               <Grid.RowDefinitions>
                  <RowDefinition Height="Auto"/>
                  <RowDefinition Height="Auto"/>
                  <RowDefinition Height="Auto"/>
                  <RowDefinition Height="Auto"/>
                  <RowDefinition Height="Auto"/>
                  <RowDefinition Height="Auto"/>
                  <RowDefinition Height="Auto"/>
                  <RowDefinition Height="Auto"/>
                  <RowDefinition Height="Auto"/>
                  <RowDefinition Height="Auto"/>
                  <RowDefinition Height="Auto"/>
               </Grid.RowDefinitions>

               <TextBox x:Name="DeviceIdTextBox" Header="Device ID" HorizontalAlignment="Center"/>



               <!-- Insert PositionView between DeviceID/Manual Toggle and EmplacmentView's buttons -->
               <RadioButton x:Name="GPSARadioButton" Content=" GPSA"  Checked="GPSARadio_Checked"/>

               <views:PositionView x:Name="GPSAPositionView" Latitude="{Binding GPSALatitude}" Longitude="{Binding GPSALongitude}" 
                           Elevation="{Binding GPSAElevation}" MGRS="{Binding GPSAMGRS}" SatelliteCount="{Binding GPSASatelliteCount}" HorizontalAlignment="Stretch" >
               </views:PositionView>

               <RadioButton x:Name="UbloxRadioButton" Content="Ublox GPS"/>

               <views:PositionView x:Name="UbloxPositionView" Latitude="{Binding UbloxLatitude}" Longitude="{Binding UbloxLongitude}" 
                           Elevation="{Binding UbloxElevation}" MGRS="{Binding UbloxMGRS}" SatelliteCount="{Binding UbloxSatelliteCount}" HorizontalAlignment="Stretch"  >
               </views:PositionView>

               <RadioButton x:Name="ManualRadioButton" Content="Manual Input"/>

               <views:PositionView x:Name="ManualPositionView" Latitude="{Binding ManualLatitude}" Longitude="{Binding ManualLongitude}" 
                           Elevation="{Binding ManualElevation}" MGRS="{Binding ManualMGRS}" SatelliteCount="{Binding ManualSatelliteCount}" HorizontalAlignment="Stretch" >
               </views:PositionView>


               <TextBlock x:Name="DataAvailableBlock" Text="{Binding Error}"  HorizontalAlignment="Center" Foreground="DarkRed"/>

                  <Button x:Name="SavePositionButton" Click="SavePositionButton_Click" >
                     <Button.Content>
                        <TextBlock TextWrapping="WrapWholeWords" Text="Save Position"/>
                     </Button.Content>
                  </Button>
                  <Button x:Name="SendPositionTableButton" Click="SendPositionTableButton_Click" >
                     <Button.Content>
                        <TextBlock TextWrapping="WrapWholeWords" Text="Send Position Table"/>
                     </Button.Content>
                  </Button>
                  <Button x:Name="EditDevicePositionButton" Click="EditDevicePositionButton_Click" >
                     <Button.Content>
                        <TextBlock TextWrapping="WrapWholeWords" Text="Edit Device Position"/>
                     </Button.Content>
                  </Button>
                  <Button x:Name="DeleteAllPositionDataButton" Click="DeleteAllPositionDataButton_Click" >
                     <Button.Content>
                        <TextBlock TextWrapping="WrapWholeWords" Text="Delete All Position Data"/>
                     </Button.Content>
                  </Button>

               </Grid>
        </UserControl>
    </ScrollViewer>

</Page>

You must use the MVVM Approch, with events. this will be a much better "Plumbing"...https://stackoverflow.com/questions/1405739/mvvm-tutorial-from-start-to-finish — pix, May 13 '19 at 13:10
Can you show sources for everything as well as binding errors? Consider to prepare [mcve], this often solved problems for me before even posting the question. — Sinatr, May 13 '19 at 13:17
The `PositionView.xaml.cs` is not complete and you forgot to show binding errors. I am expecting to see bindings in `PositionView.xaml`, but there are none. — Sinatr, May 13 '19 at 13:55
@Sinatr, I removed the bindings from PositionView which fixed the binding errors, but I don't think that was the right thing to do. I think PositionView has to have bindings of it's own. — Jeffrey M, May 13 '19 at 13:58

score 1 · Answer 1 · answered May 13 '19 at 15:46

1

Short answer: I changed bindings in my UserControl from Text={Binding Latitude, Mode=TwoWay} to Text={x:bind Latitude, Mode=TwoWay}

answered May 13 '19 at 15:46

Jeffrey M

133
14

UWP: Binding Multiple Copies of a UserControl In One View

1 Answers1