UWP C# WindowsIoT Keypad & Textblock Binding

Question

I am testing out the keypad & textblock binding based on the UWP sample PhoneCall.

However when I run my code when pressing on the keypad, the key-pressed doesn't print on the textblock.

I did some changes from sample code. I have added ViewModels & Helpers from the samples. Can advise where did I do wrong? Thanks.

My XAML code as follow;

<TextBlock x:Name="KeypadDisplay" FontSize="50" TextAlignment="Right"
                   Text="{Binding DialerPhoneNumber.NumberToDial, Mode=OneWay}" 
                   VerticalAlignment="Top" HorizontalAlignment="Left" Height="80" Width="300" Margin="70,20,0,0">
</TextBlock>

<Button Grid.Column="1" Grid.Row="1"
                    Command="{Binding ProcessDialPad}" Style="{StaticResource TextBlockButtonStyle}"
                    CommandParameter="1" Tag="1" HorizontalAlignment="Center" Height="30" Width="100">
                <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
                    <TextBlock Text="1" FontSize="18" FontWeight="Bold" Style="{StaticResource BodyTextBlockStyle}"/>
                </StackPanel>
</Button>
<Button Grid.Column="2" Grid.Row="1"
                    Command="{Binding ProcessDialPad}" Style="{StaticResource TextBlockButtonStyle}"
                    CommandParameter="2" Tag="2" HorizontalAlignment="Center" Height="30" Width="100">
                <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
                    <TextBlock Text="2" FontSize="18" FontWeight="Bold" Style="{StaticResource BodyTextBlockStyle}"/>
                </StackPanel>
</Button>
<Button Grid.Column="3" Grid.Row="1"
                    Command="{Binding ProcessDialPad}" Style="{StaticResource TextBlockButtonStyle}"
                    CommandParameter="3" Tag="3" HorizontalAlignment="Center" Height="30" Width="100">
                <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
                    <TextBlock Text="3" FontSize="18" FontWeight="Bold" Style="{StaticResource BodyTextBlockStyle}"/>
                </StackPanel>
</Button>

Update - 03-07-2019 The processdialpad routine is as follow

public ICommand ProcessDialPad
    {
        get
        {
            if (dialPadCommand == null)
            {
                dialPadCommand = new RelayCommand(
                    this.DialPadInvoked);
            }
            return dialPadCommand;
        }
    }

Answer 1

I guess you miss setting the DataContext for the page to bind the model. Please check if you add the following code in your page.

DataContext = ViewModelDispatcher.DialerViewModel;

Following code works fine for me. Here i used the same code in ViewModels and Helpers from sample PhoneCall.

MainPage.xaml

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0" HorizontalAlignment="Stretch">
        <Border Background="BlueViolet">
            <TextBlock x:Name="KeypadDisplay" FontSize="50" TextAlignment="Right"  Foreground="White"
               Text="{Binding DialerPhoneNumber.NumberToDial, Mode=OneWay}" 
               VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="100">

            </TextBlock>
        </Border>

    </StackPanel>

    <StackPanel Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="600">
            <Grid.RowDefinitions>
                <RowDefinition Height="12" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="12" />
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="12" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="12" />
            </Grid.ColumnDefinitions>

            <Button Grid.Column="1" Grid.Row="1"
            Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
            CommandParameter="1" Tag="1" Holding="OnDialPadHolding">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="1" Style="{StaticResource DialpadNumberStyle}"/>
                    <FontIcon FontFamily="Segoe MDL2 Assets" 
                      FontWeight="ExtraLight"
                      Glyph="&#xE77C;" 
                      RenderTransformOrigin="0.5,0.5" 
                      Height="14.8">
                        <FontIcon.RenderTransform>
                            <CompositeTransform ScaleX="1" ScaleY="1"/>
                        </FontIcon.RenderTransform>
                    </FontIcon>
                </StackPanel>
            </Button>
            <Button Grid.Column="2" Grid.Row="1" 
            Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
            CommandParameter="2">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="2" Style="{StaticResource DialpadNumberStyle}"/>
                    <TextBlock Text="ABC" Style="{StaticResource DialpadLetterStyle}"/>
                </StackPanel>
            </Button>
            <Button Grid.Column="3" Grid.Row="1" 
            Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
            CommandParameter="3">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="3" Style="{StaticResource DialpadNumberStyle}"/>
                    <TextBlock Text="DEF" Style="{StaticResource DialpadLetterStyle}"/>
                </StackPanel>
            </Button>
            <Button Grid.Column="1" Grid.Row="2" 
            Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
            CommandParameter="4">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="4" Style="{StaticResource DialpadNumberStyle}"/>
                    <TextBlock Text="GHI" Style="{StaticResource DialpadLetterStyle}"/>
                </StackPanel>
            </Button>
            <Button Grid.Column="2" Grid.Row="2" 
            Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
            CommandParameter="5">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="5" Style="{StaticResource DialpadNumberStyle}"/>
                    <TextBlock Text="JKL" Style="{StaticResource DialpadLetterStyle}"/>
                </StackPanel>
            </Button>
            <Button Grid.Column="3" Grid.Row="2" 
            Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
            CommandParameter="6">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="6" Style="{StaticResource DialpadNumberStyle}"/>
                    <TextBlock Text="MNO" Style="{StaticResource DialpadLetterStyle}"/>
                </StackPanel>
            </Button>
            <Button Grid.Column="1" Grid.Row="3" 
            Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
            CommandParameter="7">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="7" Style="{StaticResource DialpadNumberStyle}"/>
                    <TextBlock Text="PQRS" Style="{StaticResource DialpadLetterStyle}"/>
                </StackPanel>
            </Button>
            <Button Grid.Column="2" Grid.Row="3" 
            Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
            CommandParameter="8">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="8" Style="{StaticResource DialpadNumberStyle}"/>
                    <TextBlock Text="TUV" Style="{StaticResource DialpadLetterStyle}"/>
                </StackPanel>
            </Button>
            <Button Grid.Column="3" Grid.Row="3" 
            Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
            CommandParameter="9">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="9" Style="{StaticResource DialpadNumberStyle}"/>
                    <TextBlock Text="WXYZ" Style="{StaticResource DialpadLetterStyle}"/>
                </StackPanel>
            </Button>
            <Button Grid.Column="1" Grid.Row="4" 
            Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
            CommandParameter="*" Tag="," Holding="OnDialPadHolding">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="*" Style="{StaticResource DialpadNumberStyle}"/>
                    <TextBlock Text="," Style="{StaticResource DialpadLetterStyle}"/>
                </StackPanel>
            </Button>
            <Button Grid.Column="2" Grid.Row="4" 
            Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
            CommandParameter="0" Tag="+" Holding="OnDialPadHolding">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="0" Style="{StaticResource DialpadNumberStyle}"/>
                    <TextBlock Text="+" Style="{StaticResource DialpadLetterStyle}"/>
                </StackPanel>
            </Button>
            <Button Grid.Column="3" Grid.Row="4" 
            Command="{Binding ProcessDialPad}" Style="{StaticResource DialpadButtonStyle}"
            CommandParameter="#" Tag=";" Holding="OnDialPadHolding">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="#" Style="{StaticResource DialpadNumberStyle}"/>
                    <TextBlock Text=";" Style="{StaticResource DialpadLetterStyle}"/>
                </StackPanel>
            </Button>

        </Grid>
    </StackPanel>
</Grid>

MainPage.cs

    public MainPage()
    {
        this.InitializeComponent();

        DataContext = ViewModelDispatcher.DialerViewModel;
    }

    /// <summary>
    /// Processes press and hold for the buttons that supports press and hold. E.g
    /// 1 -> Voicemail
    /// 0 -> +
    /// * -> , (pause)
    /// # -> ; (wait)
    /// </summary>
    private void OnDialPadHolding(object sender, Windows.UI.Xaml.Input.HoldingRoutedEventArgs e)
    {
        Button button = (Button)sender;
        DialerViewModel vm = (DialerViewModel)DataContext;
        if ((vm != null) && (e.HoldingState == Windows.UI.Input.HoldingState.Started))
        {
            vm.ProcessDialPadHolding.Execute(button.Tag);
        }

    }