I'm trying to make a Grid (that contains a button and some labels) inside a button in code behind. I already did it with WPF and it works but when i try to convert it to code behind it ignores the columns.
I know that the declaration of the columns is correct because I tried it outside the button and the columns work perfectly. I don't know what to do anymore.
WPF code:
<Button HorizontalContentAlignment="Stretch" Click="OuterClick">
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Button Content="play" Grid.Column="0" Click="InnerClick"/>
<Label Content="Con calma" Grid.Column="1"/>
<Label Content="Daddy Yankee" Grid.Column="2"/>
<Label Content="Album" Grid.Column="3"/>
<Label Content="55" Grid.Column="4"/>
</Grid>
</Button>
result WPF:
Grid waitingListItemPanel = new Grid() { HorizontalAlignment = HorizontalAlignment.Stretch };
Button waitingListItemBar = new Button() { HorizontalAlignment = HorizontalAlignment.Stretch, Content = waitingListItemPanel };
waitingListItemBar.Click += OuterClick;
Button playWaitingListItemButton = new Button() { Content = "Play" };
playWaitingListItemButton.Click += InnerClick;
waitingListItemPanel.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(2, GridUnitType.Star) });
waitingListItemPanel.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(2, GridUnitType.Star) });
waitingListItemPanel.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(2, GridUnitType.Star) });
waitingListItemPanel.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(2, GridUnitType.Star) });
waitingListItemPanel.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(2, GridUnitType.Star) });
waitingListItemPanel.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(30) });
Label name = new Label() { Content = item.Name };
Label artist = new Label() { Content = item.Artist };
Label album = new Label() { Content = "Album" };
Label duration = new Label() { Content = item.Duration };
waitingListItemPanel.Children.Add(playWaitingListItemButton);
Grid.SetColumn(playWaitingListItemButton, 0);
waitingListItemPanel.Children.Add(name);
Grid.SetColumn(name, 1);
waitingListItemPanel.Children.Add(artist);
Grid.SetColumn(artist, 2);
waitingListItemPanel.Children.Add(album);
Grid.SetColumn(album, 3);
waitingListItemPanel.Children.Add(duration);
Grid.SetColumn(duration, 4);
NextUpStackPanel.Children.Add(waitingListItemBar);
result code behind:
I found out what my error is. I am setting the HorizontalAlignment = Stretch for both the grid and the button while the button actually a HorizontalContentAlignment=Stretch need.
Related
I am trying to create a menu page where I need to keep a button on screen even if a scroll, like button stops at the edge of the screen, and I have this layout in XML but I needed it in code behind to add some frame dynamic. This is what I made but it's not show up the same. Any suggestions please?
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid.Margin>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="0,20,0,0" />
</OnPlatform>
</Grid.Margin>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Text="FIXED HEADER DEMO" Margin="12" Grid.Row="0" FontSize="14" />
<Grid x:Name="ContentGrid" RowSpacing="0" ColumnSpacing="0" Grid.Row="1">
<ScrollView x:Name="TheScroll">
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition x:Name="ImageRow" Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image x:Name="BearImage" Source="bear.jpg"
Aspect="AspectFill"
Grid.Row="0" />
<Label LineBreakMode="WordWrap"
Margin="12,5,12,5"
Grid.Row="1">
Text="abc"
</Label>
</Grid>
</ScrollView>
<Label x:Name="TitleText"
Text="Bear found in the wild!"
TextColor="White"
BackgroundColor="#FF264778"
HeightRequest="40"
VerticalOptions="Start" VerticalTextAlignment="Center"
HorizontalTextAlignment="Center" />
</Grid>
</Grid>
My code behind
public void PageConstructor()
{
Grid thirdG = new Grid
{
RowDefinitions =
{
new RowDefinition { Height = new GridLength(1,GridUnitType.Auto) },
new RowDefinition { Height = new GridLength(1,GridUnitType.Star) },
},
};
var image1 = new Image
{
Source = "bear.jpg",
};
var labeltext = new Label
{
LineBreakMode = LineBreakMode.WordWrap,
Text = msg + msg2 + msg3,
};
thirdG.Children.Add(image1, 0, 0);
thirdG.Children.Add(labeltext, 0, 1);
Grid secondG = new Grid
{
};
SecondTitle= new Label { Text = "Second title text", TextColor = Color.Black };
scrollV = new ScrollView { Content = thirdG };
secondG.Children.Add(SecondTitle);
secondG.Children.AddVertical(scrollV);
Grid firstG = new Grid
{
RowDefinitions =
{
new RowDefinition { Height = new GridLength(1,GridUnitType.Auto) },
new RowDefinition { Height = new GridLength(1,GridUnitType.Star) },
},
};
firstG.Children.Add(new Label { Text = "Title" }, 0, 0);
firstG.Children.Add(secondG, 0, 1);
Content = firstG;
}
According to your code, I find you use ScrollView in Grid, it will be covered by label TitleText, so I suggest you can put scrollview outside the grid
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label
Grid.Row="0"
Margin="12"
FontSize="14"
Text="FIXED HEADER DEMO" />
<ScrollView Grid.Row="1">
<Grid x:Name="ContentGrid">
<Grid.RowDefinitions>
<RowDefinition x:Name="ImageRow" Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image
x:Name="BearImage"
Grid.Row="0"
HeightRequest="50"
Source="a11.jpg"
WidthRequest="50" />
<Label
Grid.Row="1"
Margin="12,5,12,5"
LineBreakMode="WordWrap">
Text="abc"
</Label>
<Label
x:Name="TitleText"
BackgroundColor="#FF264778"
HeightRequest="40"
HorizontalTextAlignment="Center"
Text="Bear found in the wild!"
TextColor="White"
VerticalOptions="Start"
VerticalTextAlignment="Center" />
</Grid>
</ScrollView>
</Grid>
Same effect in code behind:
public Page3()
{
InitializeComponent();
var image1 = new Image
{
Source = "a11.jpg",WidthRequest=70,HeightRequest=70
};
var label1 = new Label
{
Text = "abc"
};
var label2 = new Label
{
Text = "Bear found in the wild!",HeightRequest=20,VerticalTextAlignment=TextAlignment.Center,HorizontalTextAlignment=TextAlignment.Center
};
Grid secondG = new Grid
{
RowDefinitions =
{
new RowDefinition { Height = new GridLength(1,GridUnitType.Auto) },
new RowDefinition { Height = new GridLength(1,GridUnitType.Star) },
},
};
var scrollV = new ScrollView { Content = secondG };
secondG.Children.Add(image1,0,0);
secondG.Children.Add(label1,0,1);
secondG.Children.Add(label2);
Grid firstG = new Grid
{
RowDefinitions =
{
new RowDefinition { Height = new GridLength(1,GridUnitType.Auto) },
new RowDefinition { Height = new GridLength(1,GridUnitType.Star) },
},
};
var labeltext = new Label
{
LineBreakMode = LineBreakMode.WordWrap,FontSize=14,
Text = "FIXED HEADER DEMO"
};
firstG.Children.Add(labeltext, 0, 0);
firstG.Children.Add(scrollV, 0, 1);
Content = firstG;
}
}
I am making an accounting program using ( uwp , c#, MySQL ), I want to know when printing the reports if the datagrid is long how to extend the rest to new pages so that all report will be printed on multiple pages.
i used printhelp.cs that is in the printing sample: https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/Printing , but it printed the datagrid only on one page and didn't extend the rest to more pages.
UWP XAML:
<Grid>
<controls:DataGrid Grid.Row="2" Grid.RowSpan="5" Grid.ColumnSpan="2"
x:Name="TextContent"
Foreground="Black"
Background="White"
ItemsSource="{x:Bind SelectSOA()}"
AutoGenerateColumns="False"
GridLinesVisibility="Horizontal">
<controls:DataGrid.Columns>
<controls:DataGridTextColumn Header="ID" Binding="{Binding ID}" />
<controls:DataGridTextColumn Header="Account" Binding="{Binding Principal}" />
<controls:DataGridTextColumn Header="Balance" Binding="{Binding Client}" />
</controls:DataGrid.Columns>
<RichTextBlockOverflow x:Name="FirstLinkedContainer" OverflowContentTarget="{Binding ElementName=ContinuationPageLinkedContainer}" Grid.Row="2" Grid.Column="0"/>
<RichTextBlockOverflow x:Name="ContinuationPageLinkedContainer" Grid.Row="3" Grid.ColumnSpan="2"/>
</Grid>
i expect when printing if the Datagrid is long to extend to next page. but it only prints the first page and does not extend the rest to new pages.
You could use the Print Helper class to print the DataGrid, but you still need to manually paging your data in code-behind.
Please see the Windows Community Toolkit PrintHelper sample to learn how to use this class to print the XAML control.
According to that sample, I do a little changes to make a simple code sample for your reference:
<Grid>
<Grid x:Name="RootGrid"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid x:Name="Container"
Grid.RowSpan="2"
Opacity="0" />
<Grid x:Name="CustomPrintContainer"
Opacity="0" />
<Grid x:Name="DirectPrintContainer">
<Grid x:Name="PrintableContent">
<Grid x:Name="XamlRoot" />
</Grid>
</Grid>
</Grid>
<Button Content="Print" Click="Button_Click" VerticalAlignment="Bottom"></Button>
</Grid>
public List<Person> Persons { get; set; }
public MainPage()
{
this.InitializeComponent();
Persons = new List<Person>();
for (int i = 0; i < 100; i++)
{
Persons.Add(new Person
{
PersonId = i,
FirstName = "FirstName" + i,
LastName = "LastName" + i,
Position = "Network Administrator " + i
});
}
}
private PrintHelper _printHelper;
private async void Button_Click(object sender, RoutedEventArgs e)
{
_printHelper = new PrintHelper(CustomPrintContainer);
var pageNumber = 0;
for (int i = 0; i < Persons.Count; i = i + 10)
{
var grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
// Static header
var header = new TextBlock { Text = "Custom Print", Margin = new Thickness(0, 0, 0, 20) };
Grid.SetRow(header, 0);
grid.Children.Add(header);
// Main content with layout from data template
var dataGrid = new DataGrid();
dataGrid.AutoGenerateColumns = true;
dataGrid.ItemsSource = Persons.Skip(i).Take(10);
Grid.SetRow(dataGrid, 1);
grid.Children.Add(dataGrid);
// Footer with page number
pageNumber++;
var footer = new TextBlock { Text = string.Format("page {0}", pageNumber), Margin = new Thickness(0, 20, 0, 0) };
Grid.SetRow(footer, 2);
grid.Children.Add(footer);
_printHelper.AddFrameworkElementToPrint(grid);
}
_printHelper.OnPrintCanceled += _printHelper_OnPrintCanceled;
_printHelper.OnPrintFailed += _printHelper_OnPrintFailed;
_printHelper.OnPrintSucceeded += _printHelper_OnPrintSucceeded;
var printHelperOptions = new PrintHelperOptions(false);
printHelperOptions.Orientation = Windows.Graphics.Printing.PrintOrientation.Default;
printHelperOptions.AddDisplayOption(StandardPrintTaskOptions.Orientation);
await _printHelper.ShowPrintUIAsync("print sample", printHelperOptions);
}
public class Person
{
public int PersonId { get; set; }
public int DepartmentId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Position { get; set; }
}
In my app I am trying to create a grid layout dynamically but not getting expected output:
Below is the code that I tried:
Grid LayoutGrid = new Grid();
//Created Two Columns
ColumnDefinition gridCol1 = new ColumnDefinition();
ColumnDefinition gridCol2 = new ColumnDefinition();
LayoutGrid.ColumnDefinitions.Add(gridCol1);
LayoutGrid.ColumnDefinitions.Add(gridCol2);
Grid Col1Grid = new Grid();
//Create Two Rows
RowDefinition gridRow1 = new RowDefinition();
RowDefinition gridRow2 = new RowDefinition();
Col1Grid.RowDefinitions.Add(gridRow1);
Col1Grid.RowDefinitions.Add(gridRow2);
Grid.SetColumn(Col1Grid, 1);
return LayoutGrid;
The layout I am trying to create is like this:
I added some colors to be easier to understand
private Grid CreateGrid()
{
var LayoutGrid = new Grid { Background = new SolidColorBrush(Colors.Yellow) };
//Created Two Columns
LayoutGrid.ColumnDefinitions.Add(new ColumnDefinition());
LayoutGrid.ColumnDefinitions.Add(new ColumnDefinition());
//Created Two Rows
LayoutGrid.RowDefinitions.Add(new RowDefinition());
LayoutGrid.RowDefinitions.Add(new RowDefinition());
// region 1 - vertical left
var stack1 = new StackPanel {
Background = new SolidColorBrush(Colors.Red)
};
Grid.SetColumn(stack1, 0);
Grid.SetRowSpan(stack1, 2);
LayoutGrid.Children.Add(stack1);
// region 2 - top right
var stack2 = new StackPanel
{
Background = new SolidColorBrush(Colors.Green)
};
Grid.SetColumn(stack2, 1);
LayoutGrid.Children.Add(stack2);
// region 3 - bottom right
var stack3 = new StackPanel
{
Background = new SolidColorBrush(Colors.Blue)
};
Grid.SetColumn(stack3, 1);
Grid.SetRow(stack3, 1);
LayoutGrid.Children.Add(stack3);
return LayoutGrid;
}
Xaml:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Background="Red" Grid.RowSpan="2"></StackPanel>
<StackPanel Background="Blue" Grid.Column="1"></StackPanel>
<StackPanel Background="Green" Grid.Column="1" Grid.Row="1"></StackPanel>
</Grid>
I need to set minimum height of a RowDefinition of Gridin Xamarin.Forms using Xaml or code behind. I didn't find any property like MinHeight or MaxHeight. There is only Height property for RowDefinition.
<Grid ColumnSpacing="10" Padding="20">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
</Grid>
You can do this to set your MinimumHeight:
<Grid ColumnSpacing="10" Padding="20">
<Grid.RowDefinitions>
<RowDefinition Height= "Auto"/>
</Grid.RowDefinitions>
<ContentView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" MinimumHeightRequest="20">
...
</ContentView>
</Grid>
Note: The MinimumHeightRequest will chose the minimum between your requested height and your requested minimum height. Source
I solved the problem the same or similar way as Akash Amin.
In my custom control i added an empty boxview with a fixed height to set the minimum height of the row. The importent label was placed above the transparant boxview. So i did not place anything in the boxview.
I did the code in codebehind in my customcontrol.
var grid = new Grid();
grid.HorizontalOptions = LayoutOptions.Fill;
grid.VerticalOptions = LayoutOptions.Start;
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto, });
var minSizer = new BoxView();
minSizer.HeightRequest = 30;
grid.Children.Add(minSizer, 0, 0);
_label = new Label();
_label.VerticalTextAlignment = TextAlignment.Center;
_label.VerticalOptions = LayoutOptions.Center;
grid.Children.Add(_label, 0, 0);
...
(I think it is annoying that the MinimumWidthRequest and MinimumHeightRequest dont work as the most people expects them to do. In xamarin i mean.)
The following code is part of a small XAML application that displays data in a tabular form. Basically I need to translate this code into C#.
<Grid Width="768" Height="1056">
<Grid.RowDefinitions>
<RowDefinition Height="114" />
<RowDefinition Height="906*" />
<RowDefinition Height="36" />
</Grid.RowDefinitions>
...
<Label Grid.Row="1" Width="40" Height="32" Margin="14,4,0,0" Padding="0" HorizontalAlignment="Left" VerticalAlignment="Top" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="Black" BorderThickness="1" Name="label16">
<AccessText Margin="0,0,0,0" TextWrapping="Wrap" TextAlignment="Center" FontWeight="Bold">
SEQ
</AccessText>
</Label>
...
</Grid>
I've been looking for an answer for a couple of days and I can't find anything specific to this. Can someone please give me an idea of how to do it?
Thank you
I constructed a sample Window for you. Here is the code-behind you are looking for:
public Window1()
{
InitializeComponent();
AccessText text = new AccessText()
{
Text = "SEQ",
Margin = new Thickness(0),
TextWrapping = TextWrapping.Wrap,
TextAlignment = TextAlignment.Center,
FontWeight = FontWeights.Bold
};
Label label = new Label()
{
Content = text,
Width = 40,
Height = 32,
Margin = new Thickness(14, 4, 0, 0),
HorizontalAlignment = HorizontalAlignment.Left,
VerticalAlignment = VerticalAlignment.Top,
HorizontalContentAlignment = HorizontalAlignment.Center,
VerticalContentAlignment = VerticalAlignment.Center,
BorderBrush = Brushes.Black,
BorderThickness = new Thickness(1),
Name = "label16"
};
Grid grid = new Grid();
grid.Width = 768;
grid.Height = 1056;
grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(114) });
grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(906, GridUnitType.Star) });
grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(36) });
Grid.SetRow(label, 1);
grid.Children.Add(label);
this.Content = grid;
}
This example nicely demonstrates how easy XAML is for constructing user interfaces. :)