C# Metro Windows 8 RichTextBlock Overflow and FlipView - c#

I have some problems with new Metro design in Windows 8. I'm building simple e-reader app, and want to use two-column pages. So, my choice is FlipView and RichTextBlock with overflows. But after adding two pages, overflow doesn't have overflow content! So I have only three pages. But text is very large.
I have such code:
private async void CreatePages()
{
_pages = new List<UIElement>();
_pageCount = 1;
_lastOverflow = AddOnePage(null, _pageCount);
while (_lastOverflow.HasOverflowContent) //It's here!!
{
_pageCount++;
_lastOverflow = AddOnePage(_lastOverflow, _pageCount);
View.UpdateLayout();
}
for (var i = 1; i <= _pageCount; i++)
{
var scrollViewer = new ScrollViewer
{
Margin = new Thickness(10, 30, 10, 30),
HorizontalContentAlignment = HorizontalAlignment.Stretch,
ZoomMode = ZoomMode.Enabled,
VerticalScrollMode = ScrollMode.Enabled,
HorizontalScrollMode = ScrollMode.Disabled,
Name = "Scroll" + i
};
var snappedBlock = new RichTextBlock
{
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center,
TextWrapping = TextWrapping.Wrap,
IsTextSelectionEnabled = true
};
foreach (var text in new string[0])
{
var paragraph = new Paragraph();
paragraph.Inlines.Add(new Run { Text = text });
snappedBlock.Blocks.Add(paragraph);
}
scrollViewer.Content = snappedBlock;
SnappedView.Items.Add(scrollViewer);
}
}
private RichTextBlockOverflow AddOnePage(RichTextBlockOverflow lastOverflow, int pageNumber)
{
// Create a grid which represents the page
var grid = new Grid
{
Name = "Grid" + pageNumber
};
grid.ColumnDefinitions.Add(new ColumnDefinition
{
Width = new GridLength(1, GridUnitType.Star)
});
grid.ColumnDefinitions.Add(new ColumnDefinition
{
Width = new GridLength(1, GridUnitType.Star)
});
var grid1 = new Grid
{
Name = "Grid1_" + pageNumber
};
var grid2 = new Grid
{
Name = "Grid2_" + pageNumber
};
grid1.SetValue(Grid.ColumnProperty, 0);
grid2.SetValue(Grid.ColumnProperty, 1);
grid.Children.Add(grid1);
grid.Children.Add(grid2);
View.Items.Add(grid);
// If lastRTBOAdded is null then we know we are creating the first page.
var isFirstPage = lastOverflow == null;
RichTextBlockOverflow richTextBlockOverflow = null;
if (isFirstPage)
{
var overflow = new RichTextBlockOverflow
{
Margin = new Thickness(20, 30, 70, 30),
Name = "SecondBlock" + pageNumber,
OverflowContentTarget = new RichTextBlockOverflow(),
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center
};
overflow.SetValue(Grid.ColumnProperty, 1);
_textBlock = new RichTextBlock
{
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center,
Margin = new Thickness(70, 30, 20, 30),
TextWrapping = TextWrapping.Wrap,
IsTextSelectionEnabled = true,
Name = "FirstBlock" + pageNumber,
OverflowContentTarget = overflow
};
_textBlock.SetValue(Grid.ColumnProperty, 0);
foreach (var text in _content.Trim('\n', ' ', '\t').Split('\n'))
{
var paragraph = new Paragraph();
paragraph.Inlines.Add(new Run { Text = text });
_textBlock.Blocks.Add(paragraph);
}
grid1.Children.Add(_textBlock);
grid2.Children.Add(overflow);
_textBlock.Measure(grid1.RenderSize);
overflow.Measure(grid2.RenderSize);
_pages.Add(grid);
richTextBlockOverflow = overflow;
}
else
{
// This is not the first page so the first element on this page has to be a
// RichTextBoxOverflow that links to the last RichTextBlockOverflow added to
// the previous page.
if (lastOverflow.HasOverflowContent)
{
var overflowSecond = new RichTextBlockOverflow
{
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center,
Margin = new Thickness(20, 30, 70, 30),
Name = "SecondBlock" + pageNumber
};
overflowSecond.SetValue(Grid.ColumnProperty, 1);
var overflowFirst = new RichTextBlockOverflow
{
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center,
Margin = new Thickness(70, 30, 20, 30),
Name = "FirstBlock" + pageNumber,
OverflowContentTarget = overflowSecond
};
overflowFirst.SetValue(Grid.ColumnProperty, 0);
lastOverflow.OverflowContentTarget = overflowFirst;
grid1.Children.Add(overflowFirst);
grid2.Children.Add(overflowSecond);
overflowFirst.Measure(grid1.RenderSize);
overflowSecond.Measure(grid2.RenderSize);
_pages.Add(overflowFirst);
_pages.Add(overflowSecond);
richTextBlockOverflow = overflowSecond;
}
}
_pages.Clear();
LayoutRoot.UpdateLayout();
return richTextBlockOverflow;
}
In LoadState() I call CreatePages() method.
My XAML:
<Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootStyle}" Background="#FFDEDEDE">
<FlipView x:Name="View" HorizontalAlignment="Stretch" VerticalAlignment="Center" Foreground="Black" SelectionChanged="ViewOnSelectionChanged" FontSize="18" >
</FlipView>
<FlipView x:Name="SnappedView" HorizontalAlignment="Stretch" VerticalAlignment="Top" Foreground="Black" SelectionChanged="SnappedViewOnSelectionChanged" FontSize="12" Visibility="Collapsed">
</FlipView>
<ProgressBar x:Name="LoadProgressBar" HorizontalAlignment="Stretch" VerticalAlignment="Top" IsIndeterminate="True" Foreground="#007ACC"/>
</Grid>
Thanks to all! I hope, that someone knows, how to solve this problem..

Related

Remove unwanted spacing between ListView GroupHeaders in Xamarin.Forms

I want to remove the spacing between the group headers in the ListView.
I want to get rid of that space to make my UI more compact.
I tried everything, from setting Spacing=0, RowSpacing=0, ItemSpacing=0 etc. Really don't know what to do now.
This is the list view GroupHeader template and some other settings for the ListView
private void SetListViewDataAsync()
{
string PageTerm = GradesPage.PageTermGlobal;
List<Data> ItemSourceData = Globals.Dataset.FindAll(item => item.TermCode == PageTerm);
listView.ItemsSource = ItemSourceData;
listView.AllowGroupExpandCollapse = true;
listView.Loaded += ListView_Loaded;
listView.PropertyChanged += ListView_PropertyChanged;
listView.GroupExpanding += ListView_GroupExpanding;
listView.GroupCollapsing += ListView_GroupCollapsing;
listView.ItemSpacing = 0;
listView.ItemSize = 200;
listView.GroupHeaderSize = 80;
SetItemTemplate();
listView.DataSource.GroupDescriptors.Add(new GroupDescriptor()
{
PropertyName = "CourseName",
KeySelector = (object obj1) =>
{
var item = (obj1 as Data);
return item;
}
});
listView.GroupHeaderTemplate = new DataTemplate(() =>
{
/*
* Remove mail text, change name to a mailto:
* Remove vertical whitespacing.
*
*/
var MainGrid = new Grid() { VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.FillAndExpand, HeightRequest = 50 };
MainGrid.BackgroundColor = Xamarin.Forms.Color.FromRgba(0, 0, 0, 0.60);
MainGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
MainGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
MainGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
Binding binding1 = new Binding("Key");
binding1.Converter = new GroupHeaderConverter();
binding1.ConverterParameter = 0;
var label = new Label() { VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Start, FontSize = 17, FontAttributes = FontAttributes.Bold, TextColor = Color.White, Margin = new Thickness(5, 0, 0, 0) };
label.SetBinding(Label.TextProperty, binding1);
Binding binding4 = new Binding("Key");
binding4.Converter = new GroupHeaderConverter();
binding4.ConverterParameter = 3;
var classType = new Label() { VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center, FontSize = 10, TextColor = Color.White };
classType.SetBinding(Label.TextProperty, binding4);
var stackLayout = new StackLayout();
stackLayout.Orientation = StackOrientation.Horizontal;
stackLayout.Children.Add(label);
stackLayout.Children.Add(classType);
Binding binding2 = new Binding("Key");
binding2.Converter = new GroupHeaderConverter();
binding2.ConverterParameter = 1;
Frame border = new Frame() { Padding = 0, WidthRequest = 75, HeightRequest = 50, Margin = 10, VerticalOptions = LayoutOptions.CenterAndExpand, HorizontalOptions = LayoutOptions.End };
StackLayout score = new StackLayout() { VerticalOptions = LayoutOptions.CenterAndExpand, HorizontalOptions = LayoutOptions.Center };
Label scoreLabel = new Label() { TextColor = Color.White, FontAttributes = FontAttributes.Bold, VerticalOptions = LayoutOptions.Center, VerticalTextAlignment = TextAlignment.Center };
scoreLabel.SetBinding(Label.TextProperty, binding2);
score.Children.Add(scoreLabel);
Binding binding3 = new Binding("Key");
binding3.Converter = new GroupHeaderConverter();
binding3.ConverterParameter = 2;
border.SetBinding(BackgroundColorProperty, binding3);
border.Content = score;
MainGrid.Children.Add(stackLayout);
Grid.SetColumn(stackLayout, 0);
Grid.SetColumnSpan(stackLayout, 2);
MainGrid.Children.Add(border);
Grid.SetColumn(border, 2);
return MainGrid;
});
}
This is the ListViews ItemTemplate
private void SetItemTemplate()
{
listView.ItemTemplate = new DataTemplate(() => {
SfEffectsView effectsView = new SfEffectsView();
effectsView.TouchDownEffects = SfEffects.Ripple;
effectsView.CornerRadius = new Thickness(25, 0);
var grid = new StackLayout() { VerticalOptions = LayoutOptions.Start };
grid.BackgroundColor = Xamarin.Forms.Color.FromRgba(0, 0, 0, 0.35);
SfListView embeddedView = new SfListView() { VerticalOptions = LayoutOptions.Start };
embeddedView.AutoFitMode = AutoFitMode.Height;
embeddedView.LayoutManager = new GridLayout();
embeddedView.SelectionMode = Syncfusion.ListView.XForms.SelectionMode.None;
embeddedView.LayoutManager.SetBinding(GridLayout.SpanCountProperty, new Binding("NoOfCat"));
embeddedView.SetBinding(SfListView.ItemsSourceProperty, new Binding("CatInfoSet"));
embeddedView.ItemTemplate = new DataTemplate(() => {
var MainGrid = new StackLayout() { VerticalOptions = LayoutOptions.Start };
SfCircularProgressBar circularProgressBar = new SfCircularProgressBar() { VerticalOptions = LayoutOptions.End, HorizontalOptions = LayoutOptions.Center };
circularProgressBar.SetBinding(ProgressBarBase.ProgressProperty, new Binding("Percent"));
circularProgressBar.AnimationDuration = 0;
circularProgressBar.IndicatorOuterRadius = 0.7;
circularProgressBar.IndicatorInnerRadius = 0.6;
Binding bind = new Binding("Percent");
bind.Converter = new ColorGradientConverter();
circularProgressBar.SetBinding(ProgressBarBase.ProgressColorProperty, bind);
Grid content = new Grid();
content.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
Label score = new Label() { FontAttributes = FontAttributes.Bold, TextColor = Color.White };
score.BindingContext = circularProgressBar;
Binding scoreBinding = new Binding();
scoreBinding.Path = "Progress";
scoreBinding.StringFormat = "{0}%";
score.SetBinding(Label.TextProperty, scoreBinding);
score.HorizontalTextAlignment = TextAlignment.Center;
score.VerticalOptions = LayoutOptions.Center;
score.TextColor = Color.White;
score.FontSize = 14;
content.Children.Add(score);
circularProgressBar.Content = content;
Label label = new Label() { HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Start, FontAttributes = FontAttributes.Bold, FontSize = 14, TextColor = Color.White };
label.SetBinding(Label.TextProperty, new Binding("Description"));
MainGrid.Children.Add(circularProgressBar);
MainGrid.Children.Add(label);
return MainGrid;
});
grid.Children.Add(embeddedView);
Label l = new Label() { FontAttributes = FontAttributes.Bold, VerticalOptions = LayoutOptions.End, FontSize = 13, TextColor = Color.White, Margin = new Thickness(5, 0, 0, 0) };
l.SetBinding(Label.TextProperty, new Binding("TeachersName"));
grid.Children.Add(l);
Label l2 = new Label() { FontAttributes = FontAttributes.Italic, VerticalOptions = LayoutOptions.Center, FontSize = 12, TextColor = Color.White, Margin = new Thickness(5, 0, 0, 5) };
Binding periodB = new Binding("Period");
periodB.StringFormat = "Period {0}";
l2.SetBinding(Label.TextProperty, periodB);
grid.Children.Add(l2);
effectsView.Content = grid;
return effectsView;
});
}
Just a feeling:
In your SetListViewDataAsync() method you set:
listView.GroupHeaderSize = 80;
but on the other hand, when you set the value for listView.GroupHeaderTemplate you declare:
var MainGrid = new Grid()
{
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.FillAndExpand,
HeightRequest = 50
};
Which means you are telling the ListView that the GroupHeaderSize should be set a value of 80, and next you are telling the GroupeHeaderTemplate that it should be sized to 50, and the view to be vertically centered.
Not sure, but it might be that that extra space you are seeing is just those 80-50=30 units being set as 15 units on top and 15 at the button of your Group header.
If that is the case, there is a number of ways to solve the issue, one of them being simply changing GroupHeaderSize from 80 to 50, that is, changing your code like:
listView.GroupHeaderSize = 50;
Hope this helps!

How to bind data to a string instead of label?

I have the following code from SyncFusion that binds property book BookName to a Label.
listView = new SfListView() { ItemSpacing = 5 };
listView.WidthRequest = 350;
listView.ItemTemplate = new DataTemplate(() =>
{
ViewCell viewCell = new ViewCell();
var grid = new Grid() { RowSpacing = 1 };
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = 50 });
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = 200 });
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = 50 });
var contactImage = new Image()
{
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Center,
HeightRequest = 50
};
contactImage.SetBinding(Image.SourceProperty, new Binding("ContactImage"));
var contactName = new Label()
{
HorizontalTextAlignment = TextAlignment.Center,
LineBreakMode = LineBreakMode.NoWrap,
FontSize = Font.SystemFontOfSize(NamedSize.Medium).FontSize,
};
contactName.SetBinding(Label.TextProperty, new Binding("ContactName"));
var contactType = new Image()
{
VerticalOptions = LayoutOptions.End,
HorizontalOptions = LayoutOptions.End,
HeightRequest = 50,
};
contactType.SetBinding(Image.SourceProperty, new Binding("ContactType"));
grid.Children.Add(contactImage, 0, 0);
grid.Children.Add(contactName, 1, 0);
grid.Children.Add(contactType, 2, 0);
viewCell.View = grid;
return viewCell;
});
However, for my project I want to be able to format two of my properties into separate font attributes.
The solution I thought of that could give me the most power is to format two string properties using formatted string and setting the label's formattedText as shown below. However, I cannot retrieve the binding in a string. Another solution I can think of is to have separate labels for each binding and combining them using a Stack Layout but that solution is inconsistent throughout my UI. Thank you in advance!
var unformattedBookName = new Binding("BookName");
var unformattedBookDescription = new Binding("BookDescription");
var formattedString = new FormattedString();
formattedString.Spans.Add(new Span { Text = "{Binding unformattedBookName}", ForegroundColor = Color.Red, FontAttributes = FontAttributes.Bold });
formattedString.Spans.Add(new Span { Text = "italic small.", FontAttributes = FontAttributes.Italic, FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label)) });
var bookName = new Label()
{
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Start,
HeightRequest = 100,
FontAttributes = FontAttributes.Bold,
FontSize = 16,
FormattedText = formattedString
}
EDIT: FINAL SOLUTION
As #Jason suggested, I was able to combine both bindings into one and setting my formatted string to a single label. =)
var formattedString = new FormattedString();
var bookSpan = new Span
{
ForegroundColor = Color.Red,
FontAttributes = FontAttributes.Bold
};
bookSpan.SetBinding(Span.TextProperty, "BookName");
var bookDescriptionSpan = new Span
{
ForegroundColor = Color.Red,
FontAttributes = FontAttributes.Italic,
FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label))
};
bookDescriptionSpan.SetBinding(Span.TextProperty, "BookDescription");
formattedString.Spans.Add(bookSpan);
formattedString.Spans.Add(bookDescriptionSpan);
var combineBookLabel = new Label()
{
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Start,
HeightRequest = 100,
FontAttributes = FontAttributes.Bold,
FontSize = 16,
FormattedText = formattedString
};
that is not how you set a binding in code. The {Binding ...} syntax is for XAML. To do it in code use
var span = new Span() { ... };
span.SetBinding(Span.TextProperty, "BookName");
The solution suggested by Jason is right one. You can use the same to achieve your requirement.
Regards,
Dinesh Babu Yadav
[Syncfusion Team]

String.Format is not giving the correct string in Xamarin.Forms

I want to display text in a format in label, but it's displaying an incorrect value.
It's showing the correct value in debug mode. But its displayed wrong on the screen. Ideally, the screen should display total and subtotal as image one.
Code to format string
string paymentFormat = "{0,-25} {1,8}\n";
string paymentMode = "Total"; // Or Subtotal
string paymentAmount = "604.00";
string test = string.Format(paymentFormat, paymentMode, paymentAmount);
Update
public class AlertPopupViewItem : ContentView
{
Label HeaderLabel,MessageLabel;
public Button OKButton, CancelButton;
AbsoluteLayout _overlay;
LoggerService logservice;
public bool ButtonValue = false;
StackLayout CancelStackLayout, OKStackLayout;
string PageSource = string.Empty;
public AlertPopupViewItem()
{
logservice = new LoggerService();
logservice.WriteData(Constants.DEBUG_LOGGING, "Alert Message Popup ctor.. Start");
_overlay = new AbsoluteLayout
{
BackgroundColor = Color.Black.MultiplyAlpha(0.5),
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.Fill,
};
Grid mainGrid = new Grid
{
HeightRequest = 40,
BackgroundColor = Color.White,
Padding = 20,
RowDefinitions =
{
new RowDefinition { Height = new GridLength(15, GridUnitType.Star) },//0 Title
new RowDefinition { Height = new GridLength(3, GridUnitType.Star) },//1 Line
new RowDefinition { Height = new GridLength(80, GridUnitType.Star) },//2 Message
new RowDefinition { Height = new GridLength(12, GridUnitType.Star) },//3 OK-Cancel
}
};
HeaderLabel = new Label
{
FontAttributes = FontAttributes.Bold,
FontSize = 22,
TextColor = Color.Black,
HorizontalTextAlignment= TextAlignment.Center,
VerticalTextAlignment = TextAlignment.Center,
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions =LayoutOptions.CenterAndExpand
};
BoxView divider = new BoxView
{
HeightRequest = 1,
Color = Color.Gray,
VerticalOptions = LayoutOptions.End,
};
MessageLabel = new Label
{
FontAttributes = FontAttributes.None,
FontSize = 13,
HorizontalTextAlignment = TextAlignment.Start,
VerticalTextAlignment = TextAlignment.Center,
HorizontalOptions = LayoutOptions.StartAndExpand,
TextColor = Color.Black
};
ScrollView scroll = new ScrollView()
{
Orientation = ScrollOrientation.Vertical
};
scroll.Content = MessageLabel;
Grid ButtonGrid = new Grid
{
HeightRequest = 35,
ColumnDefinitions =
{
new ColumnDefinition {Width=new GridLength(58,GridUnitType.Star) },
new ColumnDefinition {Width=new GridLength(20,GridUnitType.Star) },
new ColumnDefinition {Width=new GridLength(2,GridUnitType.Star) },
new ColumnDefinition {Width=new GridLength(20,GridUnitType.Star) }
}
};
CancelStackLayout = new StackLayout
{
Padding = new Thickness(-6, -6, -6, -6),
//VerticalOptions = LayoutOptions.Center,
BackgroundColor = Color.FromHex("#ff9500")
};
CancelButton = new Button
{
TextColor = Color.White,
FontSize = 15,
BorderRadius = 0,
Text = Localizer.Localize("CancelSmall"),
BackgroundColor = Color.FromHex("#01458e"),
HorizontalOptions =LayoutOptions.FillAndExpand,
VerticalOptions=LayoutOptions.FillAndExpand,
BorderColor = Color.Transparent
};
CancelButton.Clicked += CancelButtonClicked;
CancelStackLayout.Children.Add(CancelButton);
ButtonGrid.Children.Add(CancelStackLayout, 1, 0);
OKStackLayout = new StackLayout
{
Padding = new Thickness(-6, -6, -6, -6),
BackgroundColor = Color.FromHex("#ff9500")
};
OKButton = new Button
{
TextColor = Color.White,
FontSize = 15,
BorderRadius = 0,
Text = Localizer.Localize("OK"),
BackgroundColor = Color.FromHex("#01458e"),
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
BorderColor = Color.Transparent
};
OKButton.Clicked += OKButtonClicked;
OKStackLayout.Children.Add(OKButton);
ButtonGrid.Children.Add(OKStackLayout, 3, 0);
mainGrid.Children.Add(HeaderLabel, 0, 0);
mainGrid.Children.Add(divider, 0, 1);
mainGrid.Children.Add(scroll, 0, 2);
mainGrid.Children.Add(ButtonGrid, 0, 3);
AbsoluteLayout.SetLayoutFlags(mainGrid, AbsoluteLayoutFlags.All);
AbsoluteLayout.SetLayoutBounds(mainGrid, Findlayoutbounds(new Rectangle(0.20, 0.25, 0.5, 0.50)));
_overlay.Children.Add(mainGrid);
Content = _overlay;
logservice.WriteData(Constants.DEBUG_LOGGING, "Alert Message Popup ctor.. End");
}
// ThreadHandle thread = new ThreadHandle();
private void CancelButtonClicked(object sender, EventArgs e)
{
ButtonValue = false;
this.IsVisible = false;
// thread.WorkMethod();
}
private void OKButtonClicked(object sender, EventArgs e)
{
ButtonValue = true;
if (PageSource == "StarterPage") ;
//MessagingCenter.Send(this, "ModifyValBooleanForAlert");
this.IsVisible = false;
// thread.WorkMethod();
}
Rectangle Findlayoutbounds(Rectangle fractionalRect)
{
if (fractionalRect.Width - 1 == 0)
fractionalRect.Width = 0.99;
if (fractionalRect.Height - 1 == 0)
fractionalRect.Height = 0.99;
Rectangle layoutbounds = new Rectangle
{
X = fractionalRect.X / (1 - fractionalRect.Width),
Y = fractionalRect.Y / (1 - fractionalRect.Height),
Width = fractionalRect.Width,
Height = fractionalRect.Height
};
return layoutbounds;
}
public void DisplayAlertPopup(string alertBoxTitle, string alertBoxContent,bool CancelDisplay)
{
HeaderLabel.IsVisible = false;
CancelStackLayout.IsVisible = CancelDisplay;
CancelButton.IsVisible = CancelDisplay;
HeaderLabel.Text = alertBoxTitle;
MessageLabel.Text = alertBoxContent;
OKButton.Text = Localizer.Localize("OK");
CancelButton.Text = Localizer.Localize("CancelSmall");
HeaderLabel.IsVisible = true;
}
public void DisplayAlertPopup(string alertBoxTitle, string alertBoxContent, string ButtonText)
{
CancelStackLayout.IsVisible = false;
CancelButton.IsVisible = false;
HeaderLabel.Text = alertBoxTitle;
MessageLabel.Text = alertBoxContent;
OKButton.Text = ButtonText;
}
public void DisplayAlertConditionalPopup(string alertBoxTitle, string alertBoxContent, bool CancelDisplay)
{
CancelStackLayout.IsVisible = CancelDisplay;
CancelButton.IsVisible = CancelDisplay;
HeaderLabel.Text = alertBoxTitle;
MessageLabel.Text = alertBoxContent;
this.IsVisible = true;
}
public void SetButtonText(string OKText, string CancelText)
{
if (OKText != null)
OKButton.Text = OKText;
if (CancelText != null)
CancelButton.Text = CancelText;
}
}
I get the formatted string from some other class and call the DisplayAlertPopup method. MessageLabel is the label for which I am setting this value.
Update2:
As suggested in answer, I have tried the below code to set the font for Android. But its also not displying the text in the required format.
MessageLabel = new Label
{
FontAttributes = FontAttributes.None,
FontSize = 13,
HorizontalTextAlignment = TextAlignment.Start,
VerticalTextAlignment = TextAlignment.Center,
HorizontalOptions = LayoutOptions.StartAndExpand,
TextColor = Color.Black,
FontFamily = "Droid Sans Mono"
};
You will need to use a fixed-width font. There is unfortunately none that is built-in across all platforms, but each platform has its own:
iOS - Courier New
Android - Droid Sans Mono
UWP - Consolas
If no built-in font suits you or you want to have the same experience on all platforms, you can also use custom fonts in Xamarin.Forms. This requires you to find a fixed-width font you like on a service like Google Fonts. Then you can follow the tutorial here on Xamarin Help, that describes how to include the TTF file in each platform and use it from XAML.
The short summary is:
Add the font to each platform project with appropriate build action (UWP - Content, iOS - Bundle Resource, Android - Android Asset)
Use the OnPlatform syntax to set the font (ideally creating a static resource so that it can be reused):
Resource:
<OnPlatform x:TypeArguments="x:String" x:Key="MyFontFamily">
<On Platform="Android" Value="MyFont.ttf#Open Sans" />
<On Platform="UWP" Value="/Assets/MyFont.ttf#Open Sans" />
<On Platform="iOS" Value="MyFont" />
</OnPlatform>
And use like this:
<Label FontFamily="{StaticResource MyFontFamily}" />

How to give tap (or tapped) event to dynamically created TextBlock

public void myTextBlock1_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
StackPanel mystack = new StackPanel() { Height = 100, Width = 200 };
TextBlock myTextBlock1 = new TextBlock()
{ Text = "Text Block", Width = 350, Height = 40, FontSize = 20,
VerticalAlignment = VerticalAlignment.Center,
TextAlignment = TextAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center, };
mystack.Children.Add(myTextBlock1);
}
for (int r = 0; r < m; r++)
{
TextBlock myTextBlockr = new TextBlock()
{ Text = "Text Block", Width = 350, Height = 40, FontSize = 20,
VerticalAlignment = VerticalAlignment.Center,
TextAlignment = TextAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center };
if (r == 0)
{
myTextBlockr.Tap += new
EventHandler<GestureEventArgs> (myTextBlock1_Tap);
}
stack1.Children.Add(myTextBlockr);
myTextBlockr.Text = a[r];
}
I want to trigger an event dynamically when a text block is created.There are no errors generated but the tap (or tapped for UWP) event doesn't trigger the function.
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
int m = 3;
InitializeComponent();
for (int r = 0; r < m; r++)
{
TextBlock myTextBlock = new TextBlock()
{
Text = "Text Block",
Width = 350,
Height = 40,
FontSize = 20,
VerticalAlignment = VerticalAlignment.Center,
TextAlignment = TextAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center
};
//If tap event required for all text box
myTextBlock.Tap += myTextBlock1_Tap;
//According to your code here you have triggered tap event
//only for the first textblock
if (r == 0)
{
myTextBlock.Tap += new
EventHandler<GestureEventArgs>(myTextBlock1_Tap);
}
// Adding to the parent Stackpanel
stack1.Children.Add(myTextBlock);
myTextBlock.Text = "My textblock "+r;
}
}
public void myTextBlock1_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
StackPanel mystack = new StackPanel() { Height = 100, Width = 200 };
TextBlock myTextBlock1 = new TextBlock()
{
Text = "Text Block",
Width = 350,
Height = 40,
FontSize = 20,
VerticalAlignment = VerticalAlignment.Center,
TextAlignment = TextAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center,
};
mystack.Children.Add(myTextBlock1);
// Adding to the parent Stackpanel
stack1.Children.Add(mystack);
}
}
This code is working , have executed and checked the same

WPF - Dynamically add button next to textbox

I am creating Label, Textbox and a button dynamically. I need Button to appear in the same line as textbox to its right.
This is the code i am using:
Label lbl = new Label()
{
Content = "Some Label",
HorizontalAlignment = HorizontalAlignment.Left,
VerticalAlignment = VerticalAlignment.Top,
HorizontalContentAlignment = HorizontalAlignment.Center,
VerticalContentAlignment = VerticalAlignment.Center,
Height = 28,
};
TextBox tb = new TextBox()
{
Text = "Some Text",
IsReadOnly = true,
};
Button btn = new Button()
{
Content = "Click Me",
HorizontalAlignment = HorizontalAlignment.Left
Margin = new Thickness(tb.ActualWidth),
};
I am assigning Button Margin to the Right of TextBox but it still appears in the next line under the textbox.
What am i doing wrong here?
You can use StackPanel to solve your problem:
StackPanel spMain = new StackPanel() { Orientation = Orientation.Vertical };
Label lbl = new Label()
{
Content = "Some Label",
HorizontalAlignment = HorizontalAlignment.Left,
VerticalAlignment = VerticalAlignment.Top,
HorizontalContentAlignment = HorizontalAlignment.Center,
VerticalContentAlignment = VerticalAlignment.Center,
Height = 28,
};
StackPanel spInner = new StackPanel() { Orientation = Orientation.Horizontal };
TextBox tb = new TextBox()
{
Text = "Some Text",
IsReadOnly = true,
};
Button btn = new Button()
{
Content = "Click Me",
HorizontalAlignment = HorizontalAlignment.Left,
Margin = new Thickness(tb.ActualWidth),
};
spInner.Children.Add(tb);
spInner.Children.Add(btn);
spMain.Children.Add(lbl);
spMain.Children.Add(spInner);
You can check following link for more information:
http://msdn.microsoft.com/en-us/library/system.windows.controls.stackpanel.orientation.aspx
It depends on what the page content that you are placing the controls on is, is it a grid or something else?
Why not also create a stackpanel which will properly contain your items in the fashion as needed.
Why don't you place all the created controls in a StackPanel with its Orientation set to Horizontal. This way they will always placed next to eachother.
var stPanel = new StackPanel { Orientation = Orientation.Horizontal };
var button = new Button() { ... }
stPanel.Children.Add(button);
//And so on
Edit: kmatyaszek was ahead of me... :)
i think it would be better if you use the Content methode from the instance of Button
private byte _count;
internal void FillbtnSubCat(Grid grid)
{
var myDefinition = new ColumnDefinition();
var myButton = new Button();
var myBlock = new TextBlock()
{
TextAlignment = TextAlignment.Center,
TextWrapping = TextWrapping.Wrap,
Text = "Some Text",
Margin = new Thickness(5, 10, 5, 10)
};
Grid.SetColumn(myButton, _count);
myButton.Margin = new Thickness(5, 10, 5, 25);
myButton.MinWidth = 30;
myButton.Content = myBlock;
myDefinition.Width = new GridLength(68);
grid.ColumnDefinitions.Add(myDefinition);
grid.Children.Add(myButton);
_count++;
}
XAML
<Grid Name="Grid1" Height="100" Width="auto">
</Grid>

Categories