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.
Related
In Avalonia Ui,
I have multiple layouts in my ui and I want a very specific tab order,
something like
<TextBox Tabindex="2">
<StackPanel>
<TextBox Tabindex="1">
</StackPanel>
<TextBox Tabindex="0">
that would result in using the tab-key cycling from bottom to top.
Is this possible? I found nothing.
I don't think so. KeyboardNavigation.TabIndex is not implmented yet: https://github.com/AvaloniaUI/Avalonia/issues/3025.
You have some limited Control using the functions provided in KeyboardNavigation and by using another control, for example a DockPanel or a Relative Panel.
Here is a very basic example for how you can use a DockPanel to do what you wish to:
<DockPanel LastChildFill="False"
VerticalAlignment="Top"
Name="TabOrderConatiner">
<TextBox Name="First" Tag="2" DockPanel.Dock="Top"></TextBox>
<TextBox Name="Third" Tag="0" DockPanel.Dock="Bottom"></TextBox>
<TextBox Name="Second" Tag="1" DockPanel.Dock="Top"></TextBox>
</DockPanel>
However it is like I said above limited compared to what TabIndex can provide.
Apart from that you should also be able to set the first TabItem when the container becomes active like that from your code-behind:
var tabOrderContainer = this.FindControl<DockPanel>("TabOrderConatiner");
var initialElement = this.FindControl<TextBox>("Third");
KeyboardNavigation.SetTabOnceActiveElement(tabOrderContainer, initialElement);
but I did not manage to get this to work...
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 have a nested gridview. There seems to be a problem with the Visibility. In the code below, OuterCollection and InnerCollection have HideInUI property which I inverse to determine the visibility (ex. if true, hide).
However, on the 2nd HideInUI, if the 1st item is hidden, it seems to hide everything else.
<GridView x:Name="GridView_Outer"
InnerCollectionsSource="{Binding Path=OuterCollection}">
<GridView.InnerCollectionTemplate>
<DataTemplate>
<StackPanel Visibility="{Binding Path=HideInUI, Converter={StaticResource InverseBooleanToVisibilityConverter}}">
<Button Content="{Binding Path=Title}"
IsEnabled="False"
Style="{StaticResource CategoryButton}"/>
<GridView x:Name="GridView_Inner"
InnerCollectionsSource="{Binding Path=InnerCollection}">
<GridView.InnerCollectionTemplate>
<DataTemplate>
<Button Width="120"
Command="{Binding ElementName=GridView_Outer, Path=DataContext.SelectPaymentTypeCommand}"
CommandParameter="{Binding Path=PaymentAmountTypeID}"
Content="{Binding Path=ScreenTitle}"
Visibility="{Binding Path=HideInUI, Converter={StaticResource InverseBooleanToVisibilityConverter}}">
</Button>
</DataTemplate>
Edit
Sorry for the confusion. But what happens is.
Ex. Category 1 has Item 1, Item 2, Item 3. If HideInUI is true in Item1, Item2 and Item3 becomes hidden also. But if Item 2 or Item3 is HideInUI instead, it works properly. I can't seem to find out why.
The issue you have here is that you are setting the visibility of the StackPanel(in your outer gridview) that contains the rest of your solution. You have to look at it as boxes, everything within it is affected by its parents in some ways.
The tabulation is a great way to help you understand which block contains what, in your example, you can clearly see that your GridView contains one thing, which is a DataTemplate. This DataTemplate also contains one thing which is the StackPanel, and so on. In your case, your StackPanel contains everything else, so if you hide it, you hide everything in it also.
What I think you actually want, it is to hide the button in the "Outer GridView", in this case, you should set visibility of the "Title" button instead of setting the visibility of the whole StackPanel.
Cutting and pasting your code:
Visibility="{Binding Path=HideInUI, Converter={StaticResource InverseBooleanToVisibilityConverter}}"
from your StackPanel to your "Title" button should do the trick.
I'm new to windows mobile apps.
I have a pivot page and inside that there is multiple pivot items.
Inside the pivot item there is list picker which values are hard coded.
If there is more items in list picker all items show in a new page by default.
My issue is since all the item font are too small when opening the screen.
How can I change the font size of list picker items when those are opening.
My code like this.
<toolkit:ListPicker Grid.Row="0" Grid.Column="2" FontSize="21" Header="" Margin="10,12,-157,12" Background="White" Foreground="Black" BorderThickness="1" >
<sys:String>Convenience Eateries (CE)</sys:String>
<sys:String>Grocery Store (GS)</sys:String>
<sys:String>Secondary Network-ASD</sys:String>
<sys:String>Secondary Network-PSD</sys:String>
<sys:String>Cash and Carry</sys:String>
<sys:String>Modern Trade-Convenience Organized</sys:String>
<sys:String>Modern Trade-Grocery independent(SMMT)</sys:String>
<sys:String>HoReCa-Leisure outlets</sys:String>
<sys:String>HoReCa-Sports Clubs</sys:String>
<sys:String>HoReCa-Night Clubs</sys:String>
<sys:String>HoReCa-Karaoke</sys:String>
<sys:String>HoReCa-Casino</sys:String>
<sys:String>HoReCa-Café and Restaurant/Pubs</sys:String>
<sys:String>HoReCa-Other</sys:String>
<sys:String>Military-Welfare Shop</sys:String>
<sys:String>Military-Canteen</sys:String>
<sys:String>Convenience Mobile Outlets</sys:String>
<sys:String>Unconventional Outlets-Wine Stores</sys:String>
<sys:String>Unconventional Outlets-Other</sys:String>
</toolkit:ListPicker>
Try using ListPickerItem children instead of strings. They should have a better default look than shown above:
<toolkit:ListPicker>
<toolkit:ListPickerItem>Bob</toolkit:ListPickerItem>
<toolkit:ListPickerItem>Betty</toolkit:ListPickerItem>
<toolkit:ListPickerItem>Frank</toolkit:ListPickerItem>
<toolkit:ListPickerItem>Frank</toolkit:ListPickerItem>
</toolkit:ListPicker>
To change how the items look in the full mode page, you need to change the ListPicker's FullModeItemTemplate property. Something like this:
<toolkit:ListPicker>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="25" />
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
<sys:String>Convenience Eateries (CE)</sys:String>
<sys:String>Grocery Store (GS)</sys:String>
<!-- Hard coded values go here, just as in your code. -->
</toolkit:ListPicker>
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>