I created a project using the default Grid Template with VS2012, and added a button to the upper right hand corner and it is NOT clickable, and if I remove the GridView then it's clickable. Strange to me, could someone point out why this is the case
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
<Button
x:Name="SettingsButton"
Grid.Column="2"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,0,120,0"
AutomationProperties.Name="Settings"
Content="Settings"
Click="SettingsButton_Click"
/>
</Grid>
<GridView .... />
</Grid>
Your GridView is being drawn on top of your button grid. Move the button grid declaration below the GridView.
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Move the GridView Here -->
<GridView .... />
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
<Button
x:Name="SettingsButton"
Grid.Column="2"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,0,120,0"
AutomationProperties.Name="Settings"
Content="Settings"
Click="SettingsButton_Click"
/>
</Grid>
</Grid>
Related
I have a ListView which is populating the result based on DataTemplate. See the code below
I am raising property changed event in cpp to reflect the same in UI for ResultText field.
But the same value is not getting reflected in AutomationProperties.Name.
How to update AutomationProperties.Name ?
<DataTemplate x:DataType="local:testResults">
<Grid x:Name="diagGrid" HorizontalAlignment="Stretch" Visibility="{x:Bind ShowStage, Mode=OneWay}" AutomationProperties.Name="{x:Bind ResultText}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SymbolIcon Grid.Column="0" Symbol="{x:Bind ResultSymbol, Mode=OneWay}" Foreground="{x:Bind SymbolColor, Mode=OneWay}" Visibility="{x:Bind IsStageComplete, Mode=OneWay}" HorizontalAlignment="Center"/>
<ProgressRing Grid.Column="0" IsActive="{x:Bind IsStageRunning, Mode=OneWay}" Margin="10,0,20,0" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="1" Text="{x:Bind StageName, Mode=OneWay}" Foreground="{ThemeResource AppBarItemDisabledForegroundThemeBrush}">
</TextBlock>
<TextBlock x:Name="test" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Text="{x:Bind ResultText, Mode=OneWay}" Margin="10" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>```
I added mode=OneWay, then it worked.
AutomationProperties.Name="{x:Bind ResultText, Mode=OneWay}">
I'm testing the Uno platform and wasm.
I test a simple databinding where I have a username in a textbox after login ainst a webapi I update the property of the username to test the update of the gui from a binded property in the viewmodel.
xaml.
in the login button
var result = await webApiClient.LoginUser(ViewModel.LoginModel);
ViewModel.LoginModel.Email = result.Model.Name;
If I run the app under UWP it works, under wasm the text box don't update.
<Page
x:Class="DeviceExchange.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DeviceExchange"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ios="http://nventive.com/ios"
xmlns:wasm="http://nventive.com/wasm"
mc:Ignorable="d ios wasm">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="1" Text="Device Exchange
Portal" Margin="20" FontSize="30" />
<TextBlock Grid.Row="2" Grid.Column="1" Text="username" Margin="3"
FontSize="15" />
<TextBox Grid.Row="3" Grid.Column="1" Text="{x:Bind LoginModel.Email,
Mode=TwoWay}" Background="White" />
<TextBlock Grid.Row="4" Grid.Column="1" Text="username" Margin="3"
FontSize="15" />
<PasswordBox Grid.Row="5" Grid.Column="1" Password="{x:Bind
LoginModel.Password, Mode=TwoWay}" Background="White"/>
<Button Margin="0,5" Click="LoginButton_Click"
VerticalAlignment="Center" HorizontalAlignment="Stretch" Grid.Row="6"
Grid.Column="1" x:Name="LoginButton" Content="Login" />
</Grid>
</Page>
{x:Bind Mode=TwoWay} is not supported right now on Uno.
https://github.com/unoplatform/uno/issues/2587
You can, instead, write it this way as a work-around:
Text="{Binding LoginModel.Email, Mode=TwoWay, RelativeSource={RelativeSource Self}}"
I have Xamarin page which has a grid with two rows and a column. In the first row/column I have a label and the second row/column I have a frame where it does not take the full height of the row. Could you help, please?
<controls:GradientColorStack
StartColor="#0cacee"
EndColor="#0574d8"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
GradientOreintation="Vertical">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="330" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Grid.Column="0"
Grid.Row="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Text="" />
<controls:CustomFrame
Grid.Row="1"
CornerRadius="30,30,0,0"
BackgroundColor="White"
HasShadow="True"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="12,20,12,0" />
</Grid>
</controls:GradientColorStack>
There is default spacing in Row and Column .
Grid has properties to control spacing between rows and columns. The following properties are available for customizing the Grid:
ColumnSpacing – the amount of space between columns. The default value of this property is 6.
RowSpacing – the amount of space between rows. The default value of this property is 6.
Here you can set RowSpacing= "0" to get full height of the row.
<Grid BackgroundColor="Accent" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="330"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label BackgroundColor="Wheat" Grid.Column="0"
Grid.Row="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Text="1111111111" />
<Frame
Grid.Row="1"
BackgroundColor="White"
HasShadow="True"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="12,0,12,0" />
</Grid>
By the way Margin="12,20,12,0" also can affect the top space, if not necessary ,can set this : Margin="12,0,12,0"
Works fine with frames ?
<Frame
BackgroundColor="Red"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="370" />
</Grid.RowDefinitions>
<Label Grid.Column="0"
BackgroundColor="GREEN"
Grid.Row="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="Start"
Text="LOL" />
<Frame
Grid.Row="1"
Grid.Column="0"
BackgroundColor="White"
HasShadow="True"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="12,20,12,0">
<StackLayout>
<Label Text="Text" />
</StackLayout>
</Frame>
</Grid>
</Frame>
I managed to setup rows and columns from the code but couldn't move this settings to xaml:
grid.RowDefinitions = new RowDefinitionCollection {
new RowDefinition { Height = new GridLength(1, GridUnitType.Star) }
};
grid.ColumnDefinitions = new ColumnDefinitionCollection {
new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }
};
The following doesn't work:
<Grid x:Name="grid" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
...
</Grid>
From the documentation I managed to fetch only c# implementation
I also get the same behaviour (does not fill and expand) for a grid with a single cell (1 row / column, although I am not sure why we would ever need a grid with a single cell full size of screen), but it seems to work fine for a 2 x 2, 3 x 3 cell grid (have not tried others yet).
The Height="" and Width="" attributes are required in Xamarin Forms although I "think" they are not needed in WPF as the default assumes this is the case.
<ContentPage.Content>
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Text="1"></Button>
<Button Grid.Row="1" Grid.Column="1" Text="2"></Button>
</Grid>
</ContentPage.Content>
Here is a sample
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Top Left" Grid.Row="0" Grid.Column="0" />
<Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
<Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" />
<Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
</Grid>
I'm new to Windows Phone 8 Development. I have developed ASP.NET websites before.
My pages (In WP8 Application) share the same headers and footers.
So what is the best method to implement a Master Page like in windows phone 8 ?
I've came across a few solutions that use Frame tag ; but they were not applicable.
Any help is highly appreciated.
PS: I'm using MVVM Light Toolkit
I came across this solution but it is a work around:
1- defining <ControlTemplatex:Key="Decorator" TargetType="ContentControl"> in App.xaml
2- in each page i want that template i just add <ContentControl Template="{StaticResource Decorator}">
Here is a little detailed sample:
App.xaml
<ControlTemplate x:Key="Decorator" TargetType="ContentControl">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid x:Name="HeaderPanel" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Button x:Name="BackBtn" Grid.Column="0" />
<TextBlock Grid.Column="1" Text="{Binding Title}" />
</Grid>
<ContentPresenter Grid.Row="1" />
<Grid x:Name="BottomPanel" Grid.Row="2" Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" />
<Button Grid.Column="1" />
<Button Grid.Column="2" />
<Button Grid.Column="3" />
</Grid>
</Grid>
</ControlTemplate>
Now in any xaml page i want to embed that content template i just add the following:
<ContentControl Template="{StaticResource Decorator}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="5*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Grid Title" />
<Grid x:Name="ContentGrid" Grid.Row="1">
</Grid>
</ContentControl>
Resource: http://www.codeproject.com/Articles/82464/How-to-Embed-Arbitrary-Content-in-a-WPF-Control