How would I set the number of characters a user is allowed to input in a TextBlock in xaml?
Would I do it on the Model or create some sort of custom attribute to handle it?
TextBlock doesn't have a MaxLength, neither does Label. TextBox does. Users cannot input into a TextBlock unless you have modified it.
Is it really a TextBlock you want to limit or did you mean a TextBox? If it is a TextBox you can simply use the MaxLength property.
<TextBox Name="textBox1" MaxLength="5" />
If it really is a TextBlock you are using and somehow allowing a user to input data into it, then switch to use a TextBox. If it is the TextBlock style you are after, you can style the TextBox to look like a TextBlock.
Without creating a custom control, you have a few options.
You could try to size the TextBlock to fit your expected text exactly, but that gets ugly fast trying to account for varying input or different font sizes.
Instead, you can verify the character length of the string to be assigned to the TextBlock.Text property and limit it if necessary.
string s = "new text";
if (s.Length > maxLen)
textBlock1.Text = s.Substring(0, maxLen);
else
textBlock1.Text = s;
Another option is to use the TextWrapping and TextTrimming properties. The following attributes could be added to your TextBlock xaml to add line wrapping and "..." to denote that text exists beyond the size of the TextBlock.
<TextBlock ... TextWrapping="Wrap" TextTrimming="CharacterEllipsis" />
You can use 'TextTrimming' Property of a Textblock. Set TextTrimming = "CharacterEllipsis". You might need to play with Width to manage how many characters you really want to display.
<TextBlock TextTrimming="CharacterEllipsis" Text="{Binding Subject}"/>
Either Set MaxHeight = "SomeHeight" and trim the overflow with
<TextBlock TextTrimming="CharacterEllipsis" Text="{Binding LongText}"
Or Use TextBox like Textblock by setting
<TextBox IsReadOnly="True" Background="Transparent" BorderThickness="0"
MaxLength="100"
Related
does anyone know how to set text of textbox in vertical center of the box? I'm trying to make my universal app responsive, and textbox size adapts as it should, but I would need text in to be always in vertical center.
Thanks for all your time and help in advance!
My code:
<TextBox
x:Name="textBox"
Margin="10"
TextWrapping="Wrap"
Text=""
Grid.Column="1"
PlaceholderText="Website"
TextAlignment="DetectFromContent"
FontSize="20"
FontFamily="Segoe UI Light"
VerticalContentAlignment="Center"
d:LayoutOverrides="TopPosition, BottomPosition" />
There's a little more to it than that. Inside the template for TextBox are several elements. Including presenters for the placeholder text and a delete button etc.
You could add an attached property to target the embedded ScrollViewer and achieve most of what you want like this;
<TextBox ScrollViewer.VerticalContentAlignment="Center" ..../>
Except if you're using placeholder "watermark" text and stuff, you may have to make a copy of the template and vertical position everything in there.
Hope this helps, cheers.
From my previous experience and some research on the web, I don't know if it's possible to have the following behavior:
<ContentPage.Content>
<AbsoluteLayout BackgroundColor="#2F767B">
<AbsoluteLayout x:Name="ScreenLayoutAdapter" BackgroundColor="#235A5E"
AbsoluteLayout.LayoutFlags="All">
<AbsoluteLayout.LayoutBounds>
<OnPlatform x:TypeArguments="Rectangle" Android="0, 0, 1, 1" iOS="1, 1, 1, 0.975" WinPhone="0, 1, 1, 1"/>
</AbsoluteLayout.LayoutBounds>
<ListView x:Name="ListViewCourses" BackgroundColor="Transparent" RowHeight="90"
AbsoluteLayout.LayoutBounds="0.5,1,0.9,0.9"
AbsoluteLayout.LayoutFlags="All">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<AbsoluteLayout Margin="2">
<!-- Your design for the cell template -->
</AbsoluteLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</AbsoluteLayout>
</AbsoluteLayout>
</ContentPage.Content>
In the c# side, I then have a ObservableCollection<Item> that I bind with the ListViewCourses.
But now my question is:
When I touch an item, how can I change of DataTemplate cell?
I mean, it's a list of items but when I touch one, I want that the cell grows up and displays more information, about the item selected.
If I have to bring more information to make you understand, tell me
Thank in advance ! :)
What you could do, instead of changing the DataTemplate of a single item, is have all of the controls containing the extra information that you want to show, be set to IsVisible = false and then when it is clicked, set IsVisible = true on all the controls and also call ListView.ForceLayout() to force the ViewCell to get redrawn.
Finally, make sure ListView.HasUnevenRows = true or else the ViewCell will not change size.
Alternatively, you may be able to add the controls containing extra information to the ViewCell when it is selected, it may or may not be slower/faster depending on the number of items in the ListView, the amount of extra controls you are adding, and whether you need to query the DB or a service for that extra information.
Let me know if you have any questions/issues.
Edit: Actually, you will want to call ViewCell.ForceUpdateSize(), info here, in order to change the size of the ViewCell once selected. You also may need to store that ViewCell instance in a class level variable so that you can shrink it back down when the user clicks a different ViewCell in the list.
Edit #2: One last thing I have run into, is that on iOS, if you have enabled ListViewCachingStrategy.RecycleElement on your ListView, you will most likely not see any change in the ViewCell after making controls visible and calling ForceUpdateSize(). This might have something to do with the last paragraph here, but I am not sure how to properly fix/get around it at this time.
Edit #3: For example you might do something like this:
<ViewCell>
<!-- Use ListView.ItemTapped instead of the TapGestureRecognizer below -->
<!-- <ViewCell.GestureRecognizers>
<TapGestureRecognizer Tapped="OnViewCellTapped"/>
</ViewCell.GestureRecognizers> -->
<StackLayout>
<!-- Main info displayed by default -->
<StackLayout StyleId="DefaultStackLayout">
<Label Text="{Binding ItemName}"/>
<Label Text="{Binding ItemDates}"/>
<Label Text="{Binding ItemCredits}"/>
</StackLayout>
<!-- Extra info displayed upon selection -->
<StackLayout StyleId="ExtraStackLayout"
IsVisible="False">
<Label Text="{Binding ItemBuilding}"/>
<Label Text="{Binding ItemTeacher}"/>
<Label Text="{Binding ItemHours}"/>
</StackLayout>
</StackLayout>
</ViewCell>
Then when the user selects the cell, you would need to do something like this:
using System.Linq;
...
private void OnViewCellTapped(object sender, EventArgs args) {}
tapCount++;
ViewCell viewCellSender = (ViewCell)sender;
StackLayout rootStack = (StackLayout)viewCellSender.View;
StackLayout extraInfoStack = rootStack.Children.Where(stack => stack.StyleId == "ExtraStackLayout");
extraInfoStack.IsVisible = true;
viewCellSender.ForceUpdateSize();
}
I have not tested any of this or even attempted it before, so if the above does not work, I am confident that inserting the extraInfoStack element content once the ViewCell is clicked, will work. But give the above a try first. Obviously you will need to change the layouts if you want to use AbsoluteLayout and you will also need to change the OnViewCellTapped() casting code.
Edit #4: I usually try to steer clear of constant numbers for height and width values if possible but sometimes it is unavoidable. So for this all to work you are going to have to set ListView.HasUnevenRows = true and that means you will need to get rid of your ListView.RowHeight value completely since the rows need to be allowed to have variable height.
If at all possible, I would try to not set a constants height value, but if you absolutely cannot live without setting the height to a constants value, then you can probably give your ViewCell's inner AbsoluteLayout a HeightRequest of 120, but then you would need to change that value when the item is selected, after making your extra controls visible and before calling ViewCell.ForceUpdateSize(). Setting IsVisible to false is supposed to make it so that the control does not take up any space, so those extra controls should not mess with the sizing while they are hidden but I have never tried it myself.
If you run into issues, please let me know.
I am styling the ListPicker with a DataTemplate. All the examples I have read assume that the ListItems are bound complex objects and so can refer to properties on the objects using the usual Binding Property syntax. e.g.
this.myListPicker.Items.Add(new Profile() { Name = "Joe",
Occupation="Button pusher" });
and in the XAML,
<DataTemplate>
<StackPanel>
<TextBox Text="{Binding Name}" />
<TextBox Text="{Binding Occupation}" />
</StackPanel>
</DataTemplate>
However my ListPickers are bound to a List of simple strings and there does not seem to be a property on the string that actually refers to the string.
How do I get a handle to the string inside the DataTemplate so that I can assign them to a e.g. TextBox in the template?
In the example code you show, you do actually have a "complex" object, a Profile, and the binding you specify should work.
If you really just have strings as the items, then the binding in your ItemTemplate would look like:
<TextBox Text="{Binding }" />
The relevant detail is that all ItemsControls (and ListPicker seems to be one) set the DataContext of the view of each item to the item. The binding syntax, above, means "bind to the source itself", and, unless otherwise specified (like with Source or RelativeSource, etc.), the source of any binding is the DataContext.
MSDN has more details here.
Background
I'm trying to put a textBlock control at the bottom of the screen (with a small margin below it), and I also wish to set a background for it, so that no matter what is shown behind the textBlock, it will be easy to read.
On Android, you could simply set the background to it, and tell it to have the width and height to be WRAP_CONTENT, so that it will take only the space it needs, but I can't find a similar thing on WP8.
Current status
This is the xaml I've created:
...
<Grid >
<Image x:Name="fullScreenImage" Stretch="Fill"
Visibility="Collapsed" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Bottom"
Margin="0,0,0,200" FontSize="40" x:Name="pictureLabel" TextWrapping="Wrap"
Foreground="#ff000000" />
</Grid>
The problem
Since the textBlock doesn't have a background property, I had to use something that wraps it. However, since its content changes dynamically, I can't simply set a size for it.
The question
For now, I would like to simply set its background color.
I would also very appreciate if it would be possible to use a rounded corners rectangle for the background, or a 9-patch image.
How can I achieve setting a background for the textBlock?
The solution is very simple. Just set the HirizontalAlignment to Left. Hope this will work in your case.
<StackPanel HorizontalAlignment="Left">
<Border Background="#66FFFFFF">
<TextBlock/>
</Border>
</StackPanel>
According to this question (which is for Silverlight - but is xaml nonetheless), there is no way to explicitly set a background color for a TextBlock. Your best bet is to wrap your TextBlock in a Grid or Border.
If a Grid does not work, this article suggests a Border will do the trick:
A simple border will do, and by not setting its width and height
properties, it will shrink/grow based on the size of the TextBlock.
I've come up with the next solution , which works quite fine , but what i really would like to also have is a way to set a min font and max font size , so that if there is a single word , the font might need to be of some size, and if the text is too long , the font will be of a smaller size , all in a dynamic way.
code:
label.Text = label;
label.Measure(new Size(RenderSize.Width, RenderSize.Height));
border.Width = label.DesiredSize.Width + border.Padding.Left + border.Padding.Right + border.BorderThickness.Left + border.BorderThickness.Right;
border.Height = label.DesiredSize.Height + border.Padding.Top + border.Padding.Bottom + border.BorderThickness.Bottom + border.BorderThickness.Top;
and the xaml:
<Border BorderBrush="#ff000000" BorderThickness="2" CornerRadius="8" Visibility="Collapsed" Padding="5" Background="#bfff0000" Margin="10,0,10,200" VerticalAlignment="Bottom" x:Name="border">
<StackPanel>
<TextBlock FontSize="40" x:Name="pictureLabel" TextWrapping="Wrap" Foreground="#ff000000" />
</StackPanel>
</Border>
Just starting to play around with the Windows 8 SDK.
Trying to create a TextBox that fills up the whole screen. Unfortunately at different resolutions the TextBox does not fill up the screen.
How do I bind the width and height of the TextBox to the width and height of the screen?
Thanks!
Don't set the width and height of the TextBox in the xaml. Instead, set HorizontalAlignment and VerticalAlignment to Stretch.
I got it to bind properly like this:
<Grid x:Name="MyGrid">
...
</Grid>
...
<TextBox x:Name="MainContent" Height="{Binding ActualHeight, ElementName=MyGrid}" HorizontalAlignment="Right" Width="{Binding ActualWidth, ElementName=MyGrid}" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF7A7A7A" FontSize="18.667"><TextBox>
Which is binding it to the size of the grid in the layout. This works by binding the Height and Width properties of the TextBox to the ActualHeight and ActualWidth values of the Grid. The ElementName of the binding links to the grid's x:Name property.
Try binding to Window.Current.Bounds. It has Height, Width, X, and Y among other properties.