How to define a grid layout - layout

I still do not manage to understand how define a flexible Grid layout...
Id like to have a Grid with n rows (i dont know how many) and m columns (i dont know how many).. I want cells have a specific height and width (50 and 50)....
This is how i can set row and column definition:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="350" />
<ColumnDefinition Width="130" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="2*" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
But in this way im just setting two columns and 3 rows... There is no way to set a Column definition and a row definition for each column and grid?
Thanx

Going on the initial question, this is how you can start C# :-
Grid Layout = new Grid();
foreach (your condition)
{
//
Layout.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
Layout.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(50)});
Layout.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(50) });
}

This is how you do it
public MainPage()
{
InitializeComponent();
var def = new ColumnDefinition();
def.Width = new GridLength(100);
gdTest.ColumnDefinitions.Add(def);
StackPanel sp = new StackPanel();
sp.Background = new SolidColorBrush( Colors.Brown);
sp.SetValue(Grid.ColumnProperty, 1);
gdTest.Children.Add(sp);
}
Xaml
<Grid x:Name="gdTest" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" x:Name="TestStack" Background="Red"/>
</Grid>
add the code and test :)

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 to convert Image to Memory stream?

I am new to xamarin. I am designing an application in which we are using SignaturePad. The signature is converting to byte using memory stream and is working fine in Android.But in IOS i am getting exception Specified cast not valid or Invalid cast Exception.Below is the code i implemented.
SignaturepadView.Xaml code:
<Grid VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<signature:SignaturePadView x:Name="padView"
Grid.Row="0"
Grid.ColumnSpan="2"
HeightRequest="100"
WidthRequest="240"
BackgroundColor="#887e70"
PromptText=""
CaptionText=""
PromptTextColor="Red"
StrokeColor="#ece6dd"
StrokeWidth="3" />
<Button Grid.Row="1"
Grid.Column="0"
Text="Save Signature"
Clicked="OnSaveClicked"/>
<Button Grid.Row="1"
Grid.Column="1"
Text="Clear"
Clicked="OnClearClicked"/>
</Grid>
In Xaml.cs
private async void OnSaveClicked(object sender, EventArgs e)
{
var format = SignatureImageFormat.Png;
var image = await padView.GetImageStreamAsync(format);`
var signatureMemoryStream = (MemoryStream)image;
byte[] data = signatureMemoryStream.ToArray();
DependencyService.Get<IPicture>().SavePictureToDisk("signimage", data);
}
This is working fine in Android.But i am getting exception Specified cast not valid or Invalid cast Exception for IOS. Am i doing anything wrong?. Please help me. Thanks in Advance.
Note: I installed package https://components.xamarin.com/view/signature-pad in PCL,Android and IOS as well. Sorry for my English.

UWP: Hide ItemsControl items

I have an ItemsControl inside another ItemsControl. This ItemsControl, contains a list of sold items.
I would like to display those items that sold below the cost (negative profit).
But I am having problem collapsing the item (row).
<ItemsControl>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
...
...
...
<ItemsControl ItemsSource="{Binding SoldItems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid> <!--If I hide the grid, it will create empty space.-->
...
...
...
<TextBlock Text="{Binding Profit}"></TextBlock>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
If I tried to hide the grid, it displays empty row. It looks weird as it has empty gap there.
<Grid Visibility="{Binding Profit, Mode=OneWay, Converter={StaticResource ProfitVisibilityConverter}}">
Any idea how to hide the entire row?
Thanks
<ListView x:Name="MyListView">
<ListView.ItemTemplate>
<DataTemplate >
<Grid Visibility="{Binding visible}" Tag="{Binding ElementName=MyListView}" Loaded="Grid_Loaded" >
<TextBlock Text="{Binding Name}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
private void Grid_Loaded(object sender, RoutedEventArgs e)
{
Grid grid = sender as Grid;
// For items control
// ContentPresenter item = (ContentPresenter)(grid.Tag as ItemsControl).ContainerFromItem(grid.DataContext);
ListViewItem item = (ListViewItem)(grid.Tag as ItemsControl).ContainerFromItem(grid.DataContext);
// Or you can directly access listview
// ListViewItem item = (ListViewItem)(MyListView as ItemsControl).ContainerFromItem(grid.DataContext);
if ((grid.DataContext as Test).visible == Visibility.Collapsed)
{
if (item != null)
{
Binding binding = new Binding();
binding.Mode = BindingMode.TwoWay;
binding.Source = (grid.DataContext as your model class)
binding.Path = new PropertyPath("givevisibilityproperty");
// Attach the binding to the target.
item.SetBinding(ListViewItem.VisibilityProperty, binding);
// (item ).Visibility = Visibility.Collapsed;
}
}
}

Metro App Callisto Framework extend CustomDialog - Add TitleBackground

Does anyone know how to extend the CustomDialog control from Callisto metro app framework, to add a TitleBackground property?
Effectively, I would like to colour the Background of the row where the Title appears.
Figured it out:
In CustomDialog.cs add:
public Brush TitleBackground
{
get { return (Brush)GetValue(TitleBackgroundProperty); }
set { SetValue(TitleBackgroundProperty, value); }
}
public static readonly DependencyProperty TitleBackgroundProperty =
DependencyProperty.Register("TitleBackground", typeof(Brush), typeof(CustomDialog), null);
And then in Generic.xaml, go to the CustomDialog style and change the Grid definition to:
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle Grid.ColumnSpan="3" Grid.Row="0" Fill="{TemplateBinding TitleBackground}"/>
<Button Grid.Column="0" Grid.Row="0" x:Name="PART_BackButton" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,24,0,0" Style="{StaticResource DialogBackButtonStyle}" Command="{TemplateBinding BackButtonCommand}" CommandParameter="{TemplateBinding BackButtonCommandParameter}" Visibility="{TemplateBinding BackButtonVisibility}"/>
<local:DynamicTextBlock Grid.Column="1" Grid.Row="0" Foreground="{TemplateBinding TitleForeground}" x:Name="PART_Title" Text="{TemplateBinding Title}" FontFamily="Segoe UI" FontSize="26.6667" FontWeight="Light" Margin="0,0,0,8" />
<ContentPresenter Grid.Column="1" Grid.Row="1" Margin="0" x:Name="PART_Content" Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background, Converter={StaticResource ColorContrast}}" />

Pop Up: a problem with margin Top

I'm developing a Windows Phone app.
I use a user control to show a pop up:
<UserControl x:Class="XXXXXXX.Views.Lists.GameDescriptionControl"
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"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}" Height="290" Width="460">
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}" Margin="0,0,0,0" Width="460">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="133"/>
<RowDefinition Height="86"/>
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Center" Margin="10" Name="gameDescription" Text="" VerticalAlignment="Top" TextWrapping="Wrap" Grid.Row="1" Style="{StaticResource PhoneTextTitle3Style}" />
<Button Content="{Binding Path=AppResources.Yes, Source={StaticResource LocalizedStrings}}" Height="72" HorizontalAlignment="Left" Margin="50,5,0,0" Name="okButton" VerticalAlignment="Top" Width="160" Click="okButton_Click" Grid.Row="2" />
<Button Content="{Binding Path=AppResources.No, Source={StaticResource LocalizedStrings}}" Height="72" HorizontalAlignment="Left" Margin="244,5,0,0" Name="cancelButton" VerticalAlignment="Top" Width="160" Click="cancelButton_Click" Grid.Row="2" />
<TextBlock Grid.Row="0" x:Name="caption" HorizontalAlignment="Left" Margin="10" TextWrapping="Wrap" Text="{Binding Path=AppResources.Description, Source={StaticResource LocalizedStrings}}" Style="{StaticResource PhoneTextLargeStyle}"/>
</Grid>
</UserControl>
And this is the code to show the Pop Up:
private void showInfo(int gameId)
{
string gameDesc = getGameInfo(gameId);
p = new Popup();
GameDescriptionControl gd = new GameDescriptionControl();
gd.Description = gameDesc;
gd.OkClicked += new EventHandler(gd_OkClicked);
gd.CancelClicked += new EventHandler(gd_CancelClicked);
p.Child = gd;
// Set where the popup will show up on the screen.
p.VerticalOffset = 10;
p.HorizontalOffset = 10;
// Open the popup.
p.IsOpen = true;
}
But I get this:
As you can see, caption TextBlock hasn't got a margin top.
Any advice?
Margin will refer to the area outside of your textblock. If you want to move your text away from the edge of the textblock you will need to use the Padding attribute.
Not to act like the word paperclip, but it looks like you're trying to make a custom MessageBox.
Check this implementation out: http://cloudstore.blogspot.com/2011/01/customizing-messagebox-on-windows-phone.html . It's a great implementation of a messagebox that is very easy to use, looks/behaves very closely to the real MessageBox, and is lightweight.
Adding the few files that come with the solution, all you have to do is:
private MessageBoxService mbs = new MessageBoxService();
...
mbs.Closed +=new System.EventHandler(mbs_Closed);
mbs.Show("Confirm?","Are you sure you wish to do that?",MessageBoxServiceButton.YesNo,null);
void mbs_Closed(object sender, System.EventArgs e)
{
mbs.Closed -= mbs_Closed;
if (mbs.Result == MessageBoxResult.Yes)
{
...
}
}

Resources