UWP Accessing content in a data bound ListView - win-universal-app

I have a ListView with a ListView.ItemTemplate if it is important: the ListView is part of a Grid). I will strip it down here for the minumum:
<ListView x:Name="lstFotos" Grid.Row="2" Grid.Column="1" Height="auto" Tapped="imageControl_Tapped" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid IsTapEnabled="True" >
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image x:Name="imageControl" Width="200" Height="200" Source="{Binding DateiSoftwareBitmapSource}" IsTapEnabled="True" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" />
<TextBlock x:Name="txtImageDateDescription" Text="Aufnahmedatum: " Grid.Column="1" Grid.Row="0" />
<TextBlock x:Name="txtImageDescriptionDescription" Text="Beschreibung: " Grid.Column="1" Grid.Row="1" />
<TextBlock x:Name="txtImageDate" Text="{Binding Datum}" Grid.Column="2" Grid.Row="0" />
<TextBox x:Name="txtImageDescription" Text="{Binding Beschreibung}" Grid.Column="2" Grid.Row="1" />
<Button x:Name="btnSpeichern" Content="Speichern" Grid.Column="3" Grid.Row="1" Click="btnSpeichern_Click" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In the code behing I do a
lstFotos.ItemsSource = AlleAnzeigeFotos
AlleAnzeigeFotos is a List(Of myClass), myClass contains the properties Datum, Beschreibung, DateiSoftwareBitmapSource.
What I want to do is that the user can edit the textfield, presses on the button and in the code behing I want to update the class and do some more stuff.
How can I get the appropriate instance of that class when I click the button?
UPDATE:
This is how it looks like:
"Beschreibung" (english: description) is empy after adding a foto and should be editable and stored by clicking "Speichern" (save).

(sender as Button).DataContext will give you the item which you clicked. Cast it to appropriate type of your class
update
Text="{Binding Beschreibung,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
var userenteredstring=((sender as Button).DataContext as your class).Beschreibung

Related

Xamarin: Scrolling to a position of a ListView when the listview is contained inside of a CarouselViewControl

Is there any way to directly access a listview that is contained within a CarouselViewControl?
I have a Carousel for the left and right swiping and inside each page, there is a listview. However, since the ListView is contained within the CarouselViewControl, I can't access it directly via code to call the ScrollTo() function nor is the ScrollTo function bindable. I've also tried looping through all of the rendered controls via a FindVisualChildren extension and it appears that when the Carousel renders, it doesn't render the listview as a listview so I don't see any way that I can scroll to a specific vertical position within it.
I'm trying to make an alphabet selector (similar to the one on android's music player) so that when the user clicks a letter, it takes them to that position in the listview. However, it also has to be inside of a carousel view so that it shows a different list when they swipe between the other pages.
Anyone have any ideas if there's any [other] way to do this?
<controls:CarouselViewControl x:Name="RecipeList" Orientation="Horizontal" InterPageSpacing="10" ItemsSource="{Binding ProductList}"
VerticalOptions="FillAndExpand" PositionSelected="RecipeList_PositionSelected"
HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
<controls:CarouselViewControl.ItemTemplate>
<DataTemplate>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<ListView x:Name="sublist" Margin="5,10,-10,-10" ItemSelected="RecipeList_ItemSelected" IsGroupingEnabled="True"
GroupDisplayBinding="{Binding Key}" ItemsSource="{Binding ProductsList}" VerticalScrollBarVisibility="Never"
SeparatorVisibility="None" HasUnevenRows="True" BackgroundColor="Transparent" SelectedItem="{Binding ScrolledItem}">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell Height="1">
<Label Text="" />
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" MinimumHeightRequest="{StaticResource ImageSize}"
Padding="15,10,0,0">
<Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="0" Margin="0,5,10,0" CornerRadius="10"
BackgroundColor="#FCFAF8" BorderColor="#F37623" HasShadow="True">
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding Image}" Grid.Column="0" Grid.Row="0" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" Aspect="AspectFit"/>
<Grid Grid.Row="0" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Text="{Binding ProductNane}" Grid.Row="0" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" FontAttributes="Bold" FontSize="Medium" TextColor="Black" BackgroundColor="Transparent" Margin="0,5,0,0"/>
<Image Source="{Binding HeartImage}" Grid.Row="0" Grid.Column="1" HorizontalOptions="End" VerticalOptions="StartAndExpand" BackgroundColor="Transparent" HeightRequest="30" WidthRequest="30" Aspect="AspectFit" Margin="0,5,10,1" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="HreatImageClicked"/>
</Image.GestureRecognizers>
</Image>
<Label Text="{Binding Description}" Grid.Row="1" Grid.Column="0" Style="{StaticResource StandardLabel}" FontSize="Small" MaxLines="2" LineBreakMode="TailTruncation" />
<lv:RatingImage Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" ImageDeselect="star_line.png" ImageSelect="yellow_star.png" ImageHeight="12" ImageWidth="12"
ItemsNumber="5" InitialValue="{Binding Rating}" HorizontalOptions="End" VerticalOptions="End"
SpaceBetween="2" IsReadOnly="True" Margin="0,0,2,0" />
</Grid>
</Grid>
</Frame>
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="RecipeDetailPage" />
</Grid.GestureRecognizers>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</DataTemplate>
</controls:CarouselViewControl.ItemTemplate>
</controls:CarouselViewControl>
Thanks!
I can't access it directly via code to call the ScrollTo() function nor is the ScrollTo function bindable.
You want to get ListView from CarouselViewControl DataTemplate, I think it is unreasonable, because it is just DataTemplate, I don't find any way to access control in DataTemplate.
So I suggest you can Create an ExtendedScrollView and expose the ScrollTo method into a read only bindable ICommand property. Bind it to your view model corresponding command and use it from there.
You can reuse the control everywhere and it can support any kind of scrolling scenario. You need to create an object to be used a the command parameter that will embed the parameters of ScrollTo, and use it inside the bindable ICommand inside ExtendedScrollView.

How do I align this to use available screen width?

The yellow part of the screen is wasted. And the space after the image is wasted. How do I shift everything to the left? Both image and text to the left and reduce the gap to the left of both image and text? I have tried to play around with margins but am unable to.
Many thanks
Iyer
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:app01" x:Class="app01.MainPage">
<Grid RowSpacing="0,0,0,20">
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="40" />
<RowDefinition Height="*˙"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Image Source="activair_logo.jpg" Grid.Row="0"/>
<Label Text="Services" Grid.Row="1" TextColor="Black" FontSize="36" FontAttributes="Bold"/>
<Grid RowSpacing="10" Margin="-100,10,0,0" Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" ColumnSpacing="-100">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Image Source="./aa_airfreight.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" VerticalOptions="Top">
<Label Grid.Column="1" Text="Air Freight" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
<Grid Grid.Row="1" ColumnSpacing="-100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Image Source="./aa_oceanfreight.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" VerticalOptions="Top">
<Label Text="Sea Freight" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
<Grid Grid.Row="2" ColumnSpacing="-100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Image Source="./aa_customs.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" VerticalOptions="Top">
<Label Text="Customs" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
<Grid Grid.Row="3" ColumnSpacing="-100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Image Source="./aa_transportation.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" VerticalOptions="Top">
<Label Text="Transportation" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
<Grid Grid.Row="4" ColumnSpacing="-100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Image Source="./aa_specialcargo.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" VerticalOptions="Top">
<Label Text="Special Cargo" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
<Grid Grid.Row="5" ColumnSpacing="-100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Image Source="./aa_exhibitioncargo.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" VerticalOptions="Top">
<Label Text="Exhibition Cargo" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
<Grid Grid.Row="6" ColumnSpacing="-100">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0" Grid.Row="0">
<Image Source="./aa_relocation.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="0" VerticalOptions="Center">
<Label Text="International Relocation" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
</Grid>
<Label Text="Customers" Grid.Row="3" TextColor="Black" FontSize="36" FontAttributes="Bold"/>
</Grid>
</ContentPage>
I had pasted the code earlier - not sure why it did not appear - have managed to do better by using negative margins on the grid. Is this portable across different devices? Is this the right way to do this? I have tried to read up default margins - seems to be 6 in most cases - but in this case seems to be a lot more. Seems like 70px margin as a -60px margin seems to be looking good. What is the right way of doing this so that it renders well across device and screen types and resolutions? I have got to this point.
Now I can't figure out how to get the Customers row in the main grid to keep up with the previous row which is a sub-grid within the main one. I am so super confused. I am able to set the height of the rows under the head "Services" but I don't want to as I want to show a lot of text when the user taps on any of the services. So, the height of that row will be dynamic. I'd therefore want to use Height="*" in that inside grid so that all the rows can be "collapsed" and "expanded" on touch.
How do I get the Row that contains "Customers" to keep aligned just under the Services sub-grid?
Many thanks
Set VerticalOptions="StartAndExpand" in Main Grid
<Grid RowSpacing="0,0,0,20" VerticalOptions="StartAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="40" />
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>

Xamarin Left margin in iPad

I face strange behavior when I am populate list view all cells have left margin
tested Device iPad 9 in simulator , iPad 12 in simulator
here is screen of my issue
and my second list
here is my Xaml
<customRender:ExtList x:Name="listViewFlights" BackgroundColor ="{StaticResource white_color}"
ItemTapped="ListView_OnItemTapped" SeparatorColor="Gray" SeparatorVisibility="Default"
MinimumHeightRequest="40" IsPullToRefreshEnabled="True" Refreshing="ListViewFlights_Refreshing" >
<ListView.ItemTemplate>
<DataTemplate>
<customRender:CustomViewCell >
<StackLayout Spacing="0" BackgroundColor="Aqua">
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" x:Name="gridCell" RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3.25*"></ColumnDefinition>
<ColumnDefinition Width="4*"></ColumnDefinition>
<ColumnDefinition Width="4.75*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding FirstListColumn}" Style="{StaticResource GridItemStyleLabelStart_os}" Margin="10,0,0,0"/>
<StackLayout Grid.Row="0" Grid.Column="1" Padding="{Binding FlightListColumn2Padding}" VerticalOptions="Center" >
<Label Text="{Binding Dep_Dest}" Style="{StaticResource GridItemStyleLabel_os}" HorizontalTextAlignment="Start"></Label>
</StackLayout>
<Grid Grid.Row="0" Grid.Column="2" HorizontalOptions="FillAndExpand" RowSpacing="0" >
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.5*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
<ColumnDefinition Width="5.5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Frame Grid.Row="0" Grid.Column="0" IsVisible="{Binding IsRecalculated}" Padding="0" Margin="0,7" OutlineColor="#5C768E" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" HasShadow="False" BackgroundColor="Transparent">
<Label Text="R" Style="{StaticResource GridItemStyleLabelStart}" HorizontalOptions="CenterAndExpand" IsVisible ="{Binding IsRecalculated}" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding ATCCtot }" Style="{StaticResource GridItemStyleLabelStart}" TextColor="Red" HorizontalOptions="Start" />
<Label Grid.Row="0" Grid.Column="2" Text="{Binding PreparedStd}" Style="{StaticResource GridItemStyleLabelEnd_os}" HorizontalOptions="EndAndExpand" HorizontalTextAlignment="End" />
</Grid>
<BoxView x:Name="SelectedBox" Grid.Row="0" Grid.Column="3" Opacity="{Binding IsSelected}" BackgroundColor="{StaticResource sub_header}" >
<BoxView.WidthRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="5" />
</BoxView.WidthRequest>
</BoxView>
</Grid>
</StackLayout>
</customRender:CustomViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</customRender:ExtList>
my tries to fix the issue :
after long search I find soluation in xamarin site , is to make custom render to my list view but it docent work
public class CustomListViewRenderer : ListViewRenderer
{
protected override void OnElementChanged (ElementChangedEventArgs<Xamarin.Forms.ListView> e)
{
base.OnElementChanged (e);
if (e.NewElement != null) {
var listView = Control as UITableView;
listView.CellLayoutMarginsFollowReadableWidth = false;
}
}
}
reference https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/viewcell/
This is a known bug that is in the process of being fixed.

stretch TextBlocks inside a Grid in a universal App

I am having a problem in fixing 3 TextBlocks inside a Grid,in a metro App,I used this link enter link description here
but I get always a problem in stretching my TextBlocks inside the Grid
this is my code:
<ListView Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Stretch">
<ListView.ItemTemplate >
<DataTemplate>
<Grid Margin="0" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Margin="0">
<Image Grid.Column="0" Source="images/img1.png" Margin="0,5" Stretch="Fill" Width="80"/>
</Border>
<Grid Grid.Column="1" Margin="5" HorizontalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="text1" Text="test1" Grid.Row="0" Margin="5" HorizontalAlignment="Stretch" ></TextBlock>
<TextBlock x:Name="text2" Text="test2" Grid.Row="1" HorizontalAlignment="Stretch" ></TextBlock>
<TextBlock x:Name="text3" Text="test3" Grid.Row="2" HorizontalAlignment="Stretch" ></TextBlock>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
so please I need your help,to fix that
thanks for help
You have to edit style of ListViewItem and set HorizontalAlignment to Stretch
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>

Setting column width to 50% of available width in windows phone 8.1

Developing/learning about WP8.1 for the 1st time.
This question is about layout.
I have 2 buttons.
I want them at the bottom of my screen.
I want each button to take 50% of the available width of the screen.
Similar to this:
So far I have this:
And this is my markup:
<Page
x:Class="Informed.BasicPage1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Informed"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
>
<Grid x:Name="LayoutRoot">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="45"/>
</Grid.RowDefinitions>
<!-- Title Panel -->
<StackPanel Grid.Row="0" Margin="19,0,0,0" Grid.ColumnSpan="2">
<Image Name="imgHeader" Grid.Row="0" Source="Images/bannershort.jpg" Stretch="UniformToFill"/>
<TextBlock Text="Log In" Margin="0,-6.5,0,26.5" Style="{ThemeResource HeaderTextBlockStyle}" CharacterSpacing="{ThemeResource PivotHeaderItemCharacterSpacing}"/>
</StackPanel>
<StackPanel Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.ColumnSpan="2">
<TextBox Name="email" Header="Email address"/>
<PasswordBox Name="password" Header="Password"/>
<CheckBox Name="showPassword" Content="Show password"/>
<!-- Content body -->
<TextBlock Name="body" Style="{StaticResource MessageDialogContentStyle}" TextWrapping="Wrap">
<TextBlock.Text>
Enter Email Address and Password created.
</TextBlock.Text>
</TextBlock>
</StackPanel>
<StackPanel Grid.Row="2" Grid.Column="0" Margin="0,0,0,0" Grid.ColumnSpan="1">
<Button Content="hello" Grid.Column="0" FontFamily="Global User Interface" />
</StackPanel>
<StackPanel Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="1">
<Button Content="hello2" Grid.Column="1" FontFamily="Global User Interface" />
</StackPanel>
</Grid>
</Page>
Remove those StackPanels they are not needed. When you want something to take available space use HorizontalAlignment = Stretch:
<Button Content="hello" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Stretch" FontFamily="Global User Interface" />
<Button Content="hello2" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" FontFamily="Global User Interface" />
You will also need to make your columns equal width:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
You may also think of adding Margin="20,0,10,0" (first) and Margin="10,0,20,0" (second).
There is no point in putting one control inside panel (except some rare cases). You may also modify your code and put those Buttons inside a Grid then there is no need to make the whole main Grid with two columns:
<Grid Grid.Row="2" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Content="hello" Grid.Column="0" HorizontalAlignment="Stretch" FontFamily="Global User Interface" />
<Button Content="hello2" Grid.Column="1" HorizontalAlignment="Stretch" FontFamily="Global User Interface" />
</Grid>

Resources