We Keep Coding

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.

How can I reach image of itemtemplate in code behind?

<ListBox Grid.Row="1" Name="listBox" Background="#2e2e2e" BorderThickness="0" Margin="0,71.8,0,0">
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel Background="#1f1f1f" Height="150" Width="1169" MouseEnter="listBox_Selected" MouseLeave="listBox_Unselected" MouseLeftButtonDown="StackPanel_MouseLeftButtonDown">
<Image Name="listImg" Source="{Binding image}" Width="120" Height="150" HorizontalAlignment="Left" Stretch="Fill"/>
<TextBlock Foreground="White" Text="{Binding title}" FontSize="19" Margin="132,-140,0,0" HorizontalAlignment="Left"/>
<TextBlock Foreground="#FFABAAAA" Text="{Binding comment}" FontSize="17" Margin="132,-90,0,0" Height="Auto" TextWrapping="Wrap" HorizontalAlignment="Left"/>
<TextBlock Foreground="White" Text="{Binding username}" FontFamily="Poetsen One" FontSize="13" Margin="130,-25,0,0" Height="Auto" HorizontalAlignment="Left"/>
<TextBlock Foreground="CornflowerBlue" Text="{Binding cost}" FontSize="16" Margin="1080,-30,0,0" Height="Auto" HorizontalAlignment="Left"/>
<TextBlock Foreground="White" Text="{Binding id}" FontSize="15" Margin="0,0,0,0" HorizontalAlignment="Left"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I can't reach listImg.
I have to use it when I select the listbox item.
How can I reach it in code above?

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

how to get a child element from a listbox C# wpf?

I'm creating a list of images in a listbox, but i need the images to be clickable.
What I'm having trouble with is getting the value from the child element(textblock) when you click the image.
I have searched all over the net, but i cannot find the solution.
`
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0" Margin="10" Grid.ColumnSpan="2">
<TextBlock FontFamily="Tunga" FontSize="30" Foreground="White" Text="WOW" />
<TextBlock FontFamily="Tunga" FontSize="25" Foreground="White" Text="Work Out Warz" />
</StackPanel>
<StackPanel Grid.Column="4" Grid.Row="0">
<TextBlock FontFamily="Tunga" FontSize="36" Foreground="White" Text="" Name="txtname" Height="45"/>
<TextBlock FontFamily="Tunga" FontSize="25" Foreground="White" Text="" Name="txtwowid" />
</StackPanel>
<Grid Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="5" >
<ListBox x:Name="LstImages" Background="Gray" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.PanningMode="HorizontalOnly" Cursor="Hand" SelectionChanged="LstImages_SelectionChanged" IsSynchronizedWithCurrentItem="True" >
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem>
<StackPanel Orientation="Vertical" Margin="10" >
<Button Click="Button_Click" >
<Image Source="{Binding img}" Height="250"/>
</Button>
<TextBlock Name="txtblname" Text="{Binding Title}" Foreground="White" FontSize="30" FontFamily="Tunga"/>
</StackPanel>
</ListBoxItem>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
`

In order to get the selected item you can bind SelectedImage in your dataContext object which should have Title and img properties to SelectedItem property of ListBox
<ListBox SelectedItem="{Binding Path=SelectedImage, Mode=TwoWay}" x:Name="LstImages" Background="Gray" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.PanningMode="HorizontalOnly" Cursor="Hand" SelectionChanged="LstImages_SelectionChanged" IsSynchronizedWithCurrentItem="True" >

Autocompletebox doesn't show the list of contents as suggestion while binding from a sqlite db

I have to get the suggestion list in the autocomplete textbox.I give the input as binding names..You can see in the xaml code in the listbox i can bind the names from Img source..but in the autocomplete i cant.. guide me that should i have to insert any code for this in Mainpage.cs
<ColumnDefinition Width="400"/>
</Grid.ColumnDefinitions>
</Grid>
<Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="12,6,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />
<ListBox HorizontalAlignment="Stretch" Name="listBox1" VerticalAlignment="Stretch" ItemsSource="{Binding Img}" Grid.Row="1" DataContext="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Height="160" HorizontalAlignment="Left" Margin="0,0,-400,0" VerticalAlignment="Top" Width="175" Source="{Binding thumb}"/>
<!--ContentControl Width="150" Height="110" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,0,-400,0" Content="{Binding Image}"/>-->
<TextBlock TextWrapping="NoWrap" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="190,-167,-200,0" Text="{Binding title}"/>
<TextBlock TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="190,-135,-200,0" Text="{Binding page}"/>
<TextBlock FontSize="16" TextWrapping="Wrap" Margin="190,-95,0,0" Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBox Height="72" HorizontalAlignment="Left" Margin="157,6,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="112" />
<toolkit:AutoCompleteBox HorizontalAlignment="Left" Margin="261,6,0,0" Name="autoCompleteBox1" VerticalAlignment="Top" Width="182" ItemsSource="{Binding Img}" ValueMemberBinding="{Binding Name}">
<toolkit:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<StackPanel >
<TextBlock
Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</toolkit:AutoCompleteBox.ItemTemplate>
</toolkit:AutoCompleteBox>
</Grid>

I solved this issue, I changed the xaml as
</TextBox>
<toolkit:AutoCompleteBox HorizontalAlignment="Left" FilterMode="Contains" Margin="-11,-14,0,0" Name="autoCompleteBox1" ValueMemberBinding="{Binding Name}" VerticalAlignment="Top" Width="800" Background="White" Height="91" Text="" TextChanged="autocompletebox1_Textchanged" BorderBrush="White" Visibility="Visible" Padding="50,14,6,4" BorderThickness="0" IsHitTestVisible="True">
<toolkit:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Width="250" TextWrapping="Wrap" Margin="25,25,0,0" FontSize="20" Text="{Binding Name}" />
<Image Height="110" Width="150" Source="{Binding Image1}" />
</StackPanel>
</DataTemplate>
</toolkit:AutoCompleteBox.ItemTemplate>
</toolkit:AutoCompleteBox>