UWP C# WindowsIoT Keypad & Textblock Binding

UWP C# WindowsIoT Keypad & Textblock Binding - c#

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;
}
}

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=""
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);
}
}

Related

UWP group has weird behavior during RunTime

I am new to XAML for UWP. So I am trying to make 4 group boxes using .XAML. When I attempt to run the code it stretches the group box that makes the GUI look terrible. What in the .XAML could cause something like this?
During design time it looks like:
When I run the code in the Simulator it looks like:
.XAML Code:
<Grid>
<ComboBox HorizontalAlignment="Center" Margin="0,48,0,0" VerticalAlignment="Top" Height="42" Width="232"/>
<ListView x:Name="DatabaseInfo" Header="Database Info." BorderThickness="2" BorderBrush="Black" SelectionMode="None" Margin="212,130,551,276" FontFamily="Tahoma" >
<ListView.HeaderTemplate>
<DataTemplate>
<ListViewHeaderItem Content="{Binding}" Height="40" />
</DataTemplate>
</ListView.HeaderTemplate>
<StackPanel Width="230" Height="30" Orientation="Horizontal" >
<TextBlock Name="ServerNameDisplay" HorizontalAlignment="Left" Text="Server" Width="115" Height="25" />
<TextBox Name="Server" HorizontalAlignment="Right" Text="" Height="25" Width="115" />
</StackPanel>
<StackPanel Width="230" Height="30" Orientation="Horizontal" >
<TextBlock Name="DatabaseNameDisplay" HorizontalAlignment="Left" Text="Database" Width="115" Height="25" />
<TextBox Name="Database" HorizontalAlignment="Right" Text="" Height="25" Width="115"/>
</StackPanel>
<StackPanel Width="230" Height="30" Orientation="Horizontal" >
<TextBlock Name="UserNameDisplay" HorizontalAlignment="Left" Text="UserName" Width="115" Height="25" />
<TextBox Name="UserName" HorizontalAlignment="Right" Text="" Height="25" Width="115"/>
</StackPanel>
<StackPanel Width="230" Height="30" Orientation="Horizontal" >
<TextBlock Name="PasswordDisplay" HorizontalAlignment="Left" Text="Password" Width="115" Height="25" />
<TextBox Name="Password" HorizontalAlignment="Right" Text="" Height="25" Width="115"/>
</StackPanel>
</ListView>
<ListView x:Name="RabbitMQInfo" Header="Rabbit MQ Info." BorderThickness="2" BorderBrush="Black" SelectionMode="None" Margin="564,130,199,350" FontFamily="Tahoma" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<ListView.HeaderTemplate>
<DataTemplate>
<ListViewHeaderItem Content="{Binding}" Height="40" />
</DataTemplate>
</ListView.HeaderTemplate>
<StackPanel Width="230" Height="30" Orientation="Horizontal" >
<TextBlock Name="RabbitMQUserDisplay" HorizontalAlignment="Left" Text="UserName" Width="115" Height="25" />
<TextBox Name="RabbitMQUser" HorizontalAlignment="Right" Text="" Height="25" Width="115"/>
</StackPanel>
<StackPanel Width="230" Height="30" Orientation="Horizontal" >
<TextBlock Name="RabbitMQPassDisplay" HorizontalAlignment="Left" Text="Password" Width="115" Height="25" />
<TextBox Name="RabbitMQPass" HorizontalAlignment="Right" Text="" Height="25" Width="115"/>
</StackPanel>
</ListView>
<ListView x:Name="MachineInfo" Header="Name Info." BorderThickness="2" BorderBrush="Black" SelectionMode="None" Margin="212,398,551,125" FontFamily="Tahoma" >
<ListView.HeaderTemplate>
<DataTemplate>
<ListViewHeaderItem Content="{Binding}" Height="40" />
</DataTemplate>
</ListView.HeaderTemplate>
<StackPanel Width="230" Height="30" Orientation="Horizontal" >
<TextBlock Name="NameDisplay" HorizontalAlignment="Left" Text="Name" Width="115" Height="25" />
<TextBox Name="Name" HorizontalAlignment="Right" Text="" Height="25" Width="115"/>
</StackPanel>
</ListView>
<ListView x:Name="IPAddressInfo" Header="IP Address Info." BorderThickness="2" BorderBrush="Black" SelectionMode="None" Margin="564,332,199,156" FontFamily="Tahoma" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<ListView.HeaderTemplate>
<DataTemplate>
<ListViewHeaderItem Content="{Binding}" Height="40" />
</DataTemplate>
</ListView.HeaderTemplate>
<StackPanel Width="230" Height="30" Orientation="Horizontal" >
<TextBlock Name="IPAddressDisplay" HorizontalAlignment="Left" Text="IPAddress" Width="115" Height="25" />
<TextBox Name="IPAddress" HorizontalAlignment="Right" Text="" Height="25" Width="115"/>
</StackPanel>
<StackPanel Width="230" Height="30" Orientation="Horizontal">
<TextBlock Name="PortDisplay" HorizontalAlignment="Left" Text="Port" Width="115" Height="25" />
<TextBox Name="Port" HorizontalAlignment="Right" Text="" Height="25" Width="115"/>
</StackPanel>
</ListView>
<Button x:Name="btnSave" Content="Save" Click="btnSave_Click" HorizontalAlignment="Center" Margin="0,539,0,0" VerticalAlignment="Top" Width="100" Height="50"/>
Another question I have about UWP applications is do you have to have something special to run the .exe that gets outputted in the Bin folder? When trying to run the .exe as Admin it just crashes and with an unhandled win32 exception.

When I attempt to run the code it stretches the group box that makes the GUI look terrible. What in the .XAML could cause something like this?
You used Margin property to control your XAML control's position, it will lead to the messy layout you see.
Please see Layout document to learn how to make a good layouts with XAML in UWP.
For example, you could simply use a Grid control to put these controls on different row and column.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="4*"></RowDefinition>
<RowDefinition Height="4*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<ComboBox HorizontalAlignment="Center" Grid.Row="0" Grid.ColumnSpan="2" VerticalAlignment="Center" Height="42" Width="232"/>
<ListView x:Name="DatabaseInfo" Grid.Row="1" Grid.Column="0" Header="Database Info." BorderThickness="2" BorderBrush="Black" SelectionMode="None" FontFamily="Tahoma" >
<ListView.HeaderTemplate>
<DataTemplate>
<ListViewHeaderItem Content="{Binding}" Height="40" />
</DataTemplate>
</ListView.HeaderTemplate>
<StackPanel Width="230" Height="30" Orientation="Horizontal" >
<TextBlock Name="ServerNameDisplay" HorizontalAlignment="Left" Text="Server" Width="115" Height="25" />
<TextBox Name="Server" HorizontalAlignment="Right" Text="" Height="25" Width="115" />
</StackPanel>
<StackPanel Width="230" Height="30" Orientation="Horizontal" >
<TextBlock Name="DatabaseNameDisplay" HorizontalAlignment="Left" Text="Database" Width="115" Height="25" />
<TextBox Name="Database" HorizontalAlignment="Right" Text="" Height="25" Width="115"/>
</StackPanel>
<StackPanel Width="230" Height="30" Orientation="Horizontal" >
<TextBlock Name="UserNameDisplay" HorizontalAlignment="Left" Text="UserName" Width="115" Height="25" />
<TextBox Name="UserName" HorizontalAlignment="Right" Text="" Height="25" Width="115"/>
</StackPanel>
<StackPanel Width="230" Height="30" Orientation="Horizontal" >
<TextBlock Name="PasswordDisplay" HorizontalAlignment="Left" Text="Password" Width="115" Height="25" />
<TextBox Name="Password" HorizontalAlignment="Right" Text="" Height="25" Width="115"/>
</StackPanel>
</ListView>
<ListView x:Name="RabbitMQInfo" Grid.Row="1" Grid.Column="1" Header="Rabbit MQ Info." BorderThickness="2" BorderBrush="Black" SelectionMode="None" FontFamily="Tahoma" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<ListView.HeaderTemplate>
<DataTemplate>
<ListViewHeaderItem Content="{Binding}" Height="40" />
</DataTemplate>
</ListView.HeaderTemplate>
<StackPanel Width="230" Height="30" Orientation="Horizontal" >
<TextBlock Name="RabbitMQUserDisplay" HorizontalAlignment="Left" Text="UserName" Width="115" Height="25" />
<TextBox Name="RabbitMQUser" HorizontalAlignment="Right" Text="" Height="25" Width="115"/>
</StackPanel>
<StackPanel Width="230" Height="30" Orientation="Horizontal" >
<TextBlock Name="RabbitMQPassDisplay" HorizontalAlignment="Left" Text="Password" Width="115" Height="25" />
<TextBox Name="RabbitMQPass" HorizontalAlignment="Right" Text="" Height="25" Width="115"/>
</StackPanel>
</ListView>
<ListView x:Name="MachineInfo" Grid.Row="2" Grid.Column="0" Header="Name Info." BorderThickness="2" BorderBrush="Black" SelectionMode="None" FontFamily="Tahoma" >
<ListView.HeaderTemplate>
<DataTemplate>
<ListViewHeaderItem Content="{Binding}" Height="40" />
</DataTemplate>
</ListView.HeaderTemplate>
<StackPanel Width="230" Height="30" Orientation="Horizontal" >
<TextBlock Name="NameDisplay" HorizontalAlignment="Left" Text="Name" Width="115" Height="25" />
<TextBox Name="Name" HorizontalAlignment="Right" Text="" Height="25" Width="115"/>
</StackPanel>
</ListView>
<ListView x:Name="IPAddressInfo" Grid.Row="2" Grid.Column="1" Header="IP Address Info." BorderThickness="2" BorderBrush="Black" SelectionMode="None" FontFamily="Tahoma" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<ListView.HeaderTemplate>
<DataTemplate>
<ListViewHeaderItem Content="{Binding}" Height="40" />
</DataTemplate>
</ListView.HeaderTemplate>
<StackPanel Width="230" Height="30" Orientation="Horizontal" >
<TextBlock Name="IPAddressDisplay" HorizontalAlignment="Left" Text="IPAddress" Width="115" Height="25" />
<TextBox Name="IPAddress" HorizontalAlignment="Right" Text="" Height="25" Width="115"/>
</StackPanel>
<StackPanel Width="230" Height="30" Orientation="Horizontal">
<TextBlock Name="PortDisplay" HorizontalAlignment="Left" Text="Port" Width="115" Height="25" />
<TextBox Name="Port" HorizontalAlignment="Right" Text="" Height="25" Width="115"/>
</StackPanel>
</ListView>
<Button x:Name="btnSave" Content="Save" Grid.Row="3" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="50"/>
</Grid>
Another question I have about UWP applications is do you have to have something special to run the .exe that gets outputted in the Bin folder? When trying to run the .exe as Admin it just crashes and with an unhandled win32 exception.
UWP runs in sandbox, it's different from the classic desktop application. You cannot directly double click the '.exe' file to start it. When you're coding in visual studio, you could press F5 to start it and debug it. If it has been deployed, you could start it from windows 'Start' menu.
Tips: Please do not post multiple question in one post next time.

WPF Scrollview UserControl

I'm trying to add an ScrollBar for my UserControl, I have a left Menu a Top bar and under the top bar is the Content where I put my UserControl so only the content need to have a ScrollBar.
I did this by Wrapping my the Code in my UserControl in <ScrollView></ScrollView>
Everything is working fine only not the Full hight not, When I set hight to Auto the content is not scrollable anymore... If I set it to 500px it works but this makes no sense why should I make my content 500px I want that the ScrollBar goes with my Windows size and be always so big like my Window.
It could be so easy microsoft (<StackPanel Scrollbar="Auto" />)...
...but why easy...
(Yes I found some Posts here with same problem but no one is resolving my problem)
<UserControl x:Class="mausys.telegram"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:mausys"
mc:Ignorable="d" Width="Auto" Height="500">
<Grid Background="Aqua">
<ScrollViewer VerticalScrollBarVisibility="auto" >
<StackPanel Grid.Column="0" >
<TextBox x:Name="telegramtextBox" HorizontalAlignment="Left" Height="23" Margin="48,78,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
<TextBox x:Name="telegramtextBox1" HorizontalAlignment="Left" Height="23" Margin="48,153,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
<Label x:Name="telegramlabel" Content="Phone Number:" HorizontalAlignment="Left" Margin="48,52,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.219,-0.282" Width="106" Height="26"/>
<Label x:Name="telegramlabel1" Content="Verifycation Code:" HorizontalAlignment="Left" Margin="48,122,0,0" VerticalAlignment="Top" RenderTransformOrigin="-0.506,-4.269"/>
<Button x:Name="telegrambutton" Content="Verify" HorizontalAlignment="Left" Margin="173,156,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="-0.234,0.571"/>
<Button x:Name="Telegrambutton1" Content="Login" HorizontalAlignment="Left" Margin="173,78,0,0" VerticalAlignment="Top" Width="75" Click="Phone_Click" />
<Button x:Name="tglogin" Click="tglogin_Click" Content="TG LogIn" HorizontalAlignment="Left" Background="BlanchedAlmond" Width="120" Margin="277,52,323,928" />
<Button x:Name="feedy" Click="feedy_Click" Content="feedy" HorizontalAlignment="Left" Background="BlanchedAlmond" Width="120" Margin="277,13,323,967" />
<Button x:Name="tbrowser" Content="Open Browser" HorizontalAlignment="Left" Background="BlanchedAlmond" Width="120" Margin="277,86,323,894" />
<Label x:Name="telegramlabel2" Content="Telegram Account Login" HorizontalAlignment="Left" FontWeight="Bold" Margin="48,10,0,0" VerticalAlignment="Top"/>
<TabControl x:Name="tabControl" HorizontalAlignment="Left" Height="343" Margin="48,181,0,0" VerticalAlignment="Top" Width="215">
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5"/>
</TabItem>
<ListBox x:Name="listBox" Height="100" Width="100"/>
</TabControl>
<ListView x:Name="listView" HorizontalAlignment="Left" Height="151" Margin="277,122,0,0" VerticalAlignment="Top" Width="134">
<ListView.View>
<GridView>
<GridViewColumn/>
</GridView>
</ListView.View>
</ListView>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="10,529,0,0" VerticalAlignment="Top" Width="300" Height="126"/>
<Button x:Name="button2" Content="Button" HorizontalAlignment="Left" Margin="10,660,0,0" VerticalAlignment="Top" Width="75" Height="330"/>
</StackPanel>
</ScrollViewer>
</Grid>
<Window x:Class="xyz.MainWindow"
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:fa="http://schemas.fontawesome.io/icons/"
xmlns:local="clr-namespace:mausys"
xmlns:local1="clr-namespace:mausys.UserControls"
mc:Ignorable="d"
Title="mausys" Height="Auto" Width="1596" WindowStyle="SingleBorderWindow" >
<!--Status and Revisions-->
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="85" />
</WindowChrome.WindowChrome>
<Border>
<DockPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!--Menu Left-->
<!--Hover effect-->
<StackPanel Grid.Column="0" Background="#23282D" >
<Label Foreground="#9EA3A8" FontWeight="Bold" FontSize="18" HorizontalAlignment="Left" Margin="15 0 0 5" >
<StackPanel Orientation="Horizontal">
<Image Source="img/logomausys.png" Width="35" Height="32" />
<TextBlock Text="MAUSYS" />
</StackPanel>
</Label>
<Button Background="#23282D" WindowChrome.IsHitTestVisibleInChrome="True" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="Dashboard" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="Dashboard" />
</StackPanel>
</Button>
<Button Background="#23282D" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="MLink" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="MLink" />
</StackPanel>
</Button>
<Button Background="#23282D" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="MLink" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="MLink" />
</StackPanel>
</Button>
<Button Background="#23282D" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="Angellist" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="MLink" />
</StackPanel>
</Button>
<Button Background="#23282D" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="Anchor" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="MLink" />
</StackPanel>
</Button>
<!--SEPARATOR-->
<Separator Background="#9EA3A8" Margin="0 10 0 10 " />
<Button Background="#23282D" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="AddressBook" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="MLinks" />
</StackPanel>
</Button>
<Button Background="#23282D" Foreground="#F1F1F1" FontSize="14" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="CalendarPlusOutline" Foreground="#9EA3A8" Height="15" Width="15" Margin="10 0 6 0" />
<TextBlock Text="MLink" />
</StackPanel>
</Button>
<Label Foreground="#9EA3A8" FontSize="12" HorizontalAlignment="Left" Margin="5 30 0 5" >
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="ArrowCircleLeft" Foreground="#9EA3A8" Height="15" Margin="10 0 6 0" />
<TextBlock Text="MLink" />
</StackPanel>
</Label>
</StackPanel>
<!--APP Content-->
<StackPanel Grid.Column="1" Background="#F1F1F1" >
<!--Top Bar-->
<Grid VerticalAlignment="Top" Background="#23282D" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Center" >
<TextBlock Text="hhh" FontWeight="Bold" Foreground="#9EA3A8" Margin="6 0 0 0" />
</StackPanel>
<StackPanel Grid.Column="1" >
</StackPanel>
<StackPanel Height="31" Grid.Column="2" VerticalAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Right" >
</StackPanel>
</Grid>
<!--Window Controls & Console -->
<Grid VerticalAlignment="Top" Background="#0073AA" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel WindowChrome.IsHitTestVisibleInChrome="True" Grid.Column="0" VerticalAlignment="Center" >
<Button Content="ADD NEW" Width="70" Height="50" HorizontalAlignment="Left" Margin="10 0 0 0" />
</StackPanel>
<StackPanel Grid.Column="1" >
</StackPanel>
<StackPanel Grid.Column="2" WindowChrome.IsHitTestVisibleInChrome="True" Height="60" VerticalAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Right" >
<Button fa:Awesome.Content="WindowMinimize" Foreground="#0073AA" Background="White" Content="_" Height="31" Width="31" Margin="3" Name="MinimizeButton" Click="MinimizeButton_Click" />
<Button fa:Awesome.Content="WindowMaximize" Foreground="#0073AA" Background="White" Content="[]" Height="31" Width="31" Margin="3" Name="MaximizeButton" Click="MaximizeButton_Click" />
<Button fa:Awesome.Content="Close" Foreground="#0073AA" Background="White" Content="X" Height="31" Width="31" Margin="3 3 20 3" Name="CloseButton" Click="CloseButton_Click" />
</StackPanel>
</Grid>
<!--Window Controls & Console -->
<Grid VerticalAlignment="Top" Background="Beige">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Center" >
<!--local:telegram />-->
</StackPanel>
</Grid>
<!--User Controls HERE ARE THE USER CONTROLS-->
<local:telegram />
</StackPanel>
</Grid>
</DockPanel>
</Border>

I dont understand xaml alignment

So I struggle with the XAML alignment a bit and I hoped for someone who could help me get trough it.
This is the Code. I will break it down below:
<Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="0">
<StackPanel>
<Button Style="{StaticResource AppBarButtonStyle}" Click="ShowPopupOffsetClicked"/>
<Image Source="Assets/images/icon_thumbnail.png"></Image>
</StackPanel>
<Popup VerticalOffset="60" HorizontalOffset="0" x:Name="StandardPopup">
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="300" Height="350">
<StackPanel >
<TextBlock>
<Run x:Name="MyRun" Text=""/>
</TextBlock>
<StackPanel Orientation="Horizontal">
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBox x:Name="searchTextBox" Width="200" Height="30" />
</StackPanel>
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Top">
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
<Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</StackPanel>
</Border>
</Popup>
</Grid>
This part will be MyRun Text later:
<TextBlock>
<Run x:Name="MyRun" Text=""/>
</TextBlock>
This part is the SearchBar and the search-button which should be perfectly in line. How do I do this?
<StackPanel Orientation="Horizontal">
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBox x:Name="searchTextBox" Width="200" Height="30" />
</StackPanel>
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Top">
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
</StackPanel>
This is the next and previous button. It should be perfectly in line with MyRun. How would I do that?
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
And at last will be the "Close" Button. I guess it is kinda already perfect?:
<Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
Now a screenshot of how it Looks like and how I want it to look:
This is how it is:
This is how I want it to be:
I know that I can Change the height of the popup. But when I Change the height some Things disappear (for example the close Botton won't be visible because it is too far down while the popup height is too low).
Sorry for the long post. I hope someone can help me out here.

You should be able to use a Grid with three RowDefinitions. Something like this:
<Popup VerticalOffset="60" HorizontalOffset="0" x:Name="StandardPopup">
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="300" Height="350">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- row 1 -->
<StackPanel Orientation="Horizontal">
<TextBox x:Name="searchTextBox" Width="200" Height="30" Margin="0,0,3,0" />
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
<!-- row 2 -->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
<TextBlock Grid.Column="1" HorizontalAlignment="Center">
<Run x:Name="MyRun" Text=""/>
</TextBlock>
</Grid>
<!-- row 3 -->
<Button Grid.Row="2"
Content="Close" Click="ClosePopupClicked"
HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</Grid>
</Border>
</Popup>
You can adjust the space between the controls using the Margin property.

Autosuggestbox doesn't display the suggestionlist when I set the property Grid.Row=0. How to expand the result list downwards?

<ScrollViewer Name="scroll" VerticalScrollBarVisibility="Auto">
<Grid Name="ggrid" Canvas.ZIndex="0" Background="{StaticResource bg_color}">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<AutoSuggestBox Name="suggestion_box" Grid.Row="0" TextChanged="suggestion_box_TextChanged" UpdateTextOnSelect="True" QuerySubmitted="suggestion_box_QuerySubmitted"/>
<StackPanel Grid.Row="1" Name="main_sp">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<StackPanel Name="datepanel" Orientation="Horizontal" HorizontalAlignment="Center" >
<TextBlock Text="Date:" VerticalAlignment="Center" Foreground="{StaticResource accent_color}" />
<TextBox VerticalAlignment="Center" TextAlignment="Center" Name="day_box" PlaceholderText="Day" />
<TextBox VerticalAlignment="Center" TextAlignment="Center" Name="month_box" PlaceholderText="Month" />
<TextBox VerticalAlignment="Center" TextAlignment="Center" Name="year_box" PlaceholderText="Year" />
</StackPanel>
<StackPanel Margin="30,0,0,0" Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Invoice No." Foreground="{StaticResource accent_color}" VerticalAlignment="Center"/>
<TextBox Name="Invoice_No" BorderThickness="0" Margin="10,0,10,0" PlaceholderText="2001" Foreground="{StaticResource accent_color}" />
<TextBlock Text="/" Margin="10,0,10,0" VerticalAlignment="Center" Foreground="{StaticResource accent_color}"/>
<StackPanel Orientation="Horizontal">
<TextBox Name="Year1" BorderThickness="0" Margin="10,0,10,0" PlaceholderText="17" Foreground="{StaticResource accent_color}"/>
<TextBlock Text="-" VerticalAlignment="Center" Foreground="{StaticResource accent_color}" />
<TextBlock Name="Year2" Text="18" VerticalAlignment="Center" Foreground="{StaticResource accent_color}" />
</StackPanel>
</StackPanel>
</StackPanel>
<StackPanel Name="challan_sp" Orientation="Vertical">
<Button Name="Challan_Add_button" Margin="10" Content="Add Challan" FontWeight="Light" Foreground="{StaticResource accent_color}" FontSize="32" HorizontalAlignment="Stretch" Click="Challan_Add_button_Click" Style="{StaticResource ButtonStyle1}"/>
</StackPanel>
</StackPanel>
<Button Grid.Row="2" Name="Save_button" HorizontalAlignment="Center" Content="Save" FontWeight="Light" Foreground="{StaticResource accent_color}" FontSize="32" Click="Save_button_Click" Style="{StaticResource ButtonStyle1}"/>
</Grid>
</ScrollViewer>
When I set the Row.Grid="0" for the autosuggestbox, it doesn't display the suggestionlist. But, when I set the Row.Grid="3", it displays the suggestionlist.
It would be helpful if I would be able to expand the list downwards while setting the Row.Grid="0".

Have you tried to set main grid (ggrid) properties :
VerticalAligment = "Strench" HorizontalAligment = "Strench"
EDIT
Checked your code , is running perfect on my PC. I suppose this scrollviewer is child of other control

click on the row of an ItemsControl and pass an id

I made a list , and my need is to be able to make click ( touch ) the user across the row , when clicked I should be able to pass the 'mid' to event , I hid in the code to pick it up then at the click of that record.
It's possible ?
<Grid Grid.Row="1" Grid.ColumnSpan="2">
<ScrollViewer VerticalScrollBarVisibility="Hidden" PanningMode="Both">
<ItemsControl ItemsSource="{Binding Path=NextMeetingList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Grid.Column="0" Grid.Row="0">
<Border Grid.Column="0" Grid.Row="0" Margin="10" Height="60" Background="GhostWhite" CornerRadius="3" BorderBrush="{Binding BorderColor}" BorderThickness="0,8,0,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="118"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" FontSize="40" Margin="10,5,0,0" Style="{DynamicResource Lato-Semibold}" Text="{Binding endDate.Day}"/>
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" FontSize="12" Margin="77,13,0,0" Height="Auto" Style="{DynamicResource Lato-Semibold}" Text="{Binding DayString}"/>
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" FontSize="14" Margin="70,26,0,0" Height="Auto" Style="{DynamicResource Lato-Semibold}" Text="{Binding endDate.Hour}"/>
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" FontSize="14" Margin="86,26,0,0" Height="Auto" Style="{DynamicResource Lato-Semibold}" Text=":"/>
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" FontSize="14" Margin="90,26,0,0" Height="Auto" Style="{DynamicResource Lato-Semibold}" Text="{Binding MinuteString}"/>
<Border Grid.Row="0" Grid.Column="0" Width="1" BorderBrush="#BABABA" Height="40" Margin="115,-6,0,0" BorderThickness="1" HorizontalAlignment="Left"></Border>
<TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" Text="{Binding subject}" FontWeight="Bold" FontSize="17" Margin="10,10,0,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" Width="Auto" TextWrapping="Wrap" HorizontalAlignment="Left" Text="{Binding descr}" FontSize="10" Margin="20,27,150,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" Text="{Binding companyName}" FontSize="10" Margin="0,10,30,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" Text="{Binding Location}" FontSize="10" Margin="0,27,30,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" Text=">" FontSize="15" VerticalAlignment="Center" Margin="0,-5,10,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" Text="{Binding mid}" Visibility="Hidden" FontSize="15" VerticalAlignment="Center" Margin="0,-5,10,0"/>
</Grid>
</Border>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>

A possible solution is to wrap your content in an invisible button and passing the id or the entire object as CommandParameter to a Command on the ViewModel.
<Button Command="{Binding DataContext.MyCommmand, ElementName=mainGrid}"
CommandParameter="{Binding}">
<!-- Content -->
</Button>

Typically if I want to handle a Click event of anything I just use a Button and overwrite the .Template of it.
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Template="{StaticResource ContentOnlyTemplate}"
CommandParameter="{Binding mid}"
Click/Command=...>
<StackPanel Grid.Column="0" Grid.Row="0">
...
</StackPanel>
</Button>
</DataTemplate>
</ItemsControl>
WPF controls are meant to be "lookless", so a Button control is ideal in this case because it contains the functionality to handle Click and/or Command/CommandParameter.

We Keep Coding

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

UWP C# WindowsIoT Keypad & Textblock Binding - c#

Related

UWP group has weird behavior during RunTime

WPF Scrollview UserControl

I dont understand xaml alignment

Autosuggestbox doesn't display the suggestionlist when I set the property Grid.Row=0. How to expand the result list downwards?

click on the row of an ItemsControl and pass an id

Categories

Resources