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>
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...
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.
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.
Does anyone know how to use the DevExpress DXTabControl in XAML and set it up so that the tabs appear at the bottom? Here is what I have so far but the tabs show up at the top. The DevExpress documentation does not have an example of this. Intellisense does not give me anything intuitive.
<dx:DXTabControl>
<dx:DXTabItem Header="Main">
<dxdo:DockLayoutManager>
<dxdo:LayoutGroup>
<dxdo:LayoutPanel Caption="TaskList">
<views:DxTaskList x:Name="Tasklst" />
</dxdo:LayoutPanel>
<dxdo:LayoutPanel Caption="TaskDetails">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Focusable="False">
<StackPanel>
<views:TaskDetails x:Name="TaskDtls"/>
</StackPanel>
</ScrollViewer>
</dxdo:LayoutPanel>
</dxdo:LayoutGroup>
</dxdo:DockLayoutManager>
</dx:DXTabItem>
</dx:DXTabControl>
For anyone who might be stumped at something not-so-obvious, here is the XAML solution I was looking for. Yes, the property was obviously called HeaderLocation but DevExpress' documentation does not give any XAML examples on this. So here is what I came up with that solved my case:
<dx:DXTabControl>
<dx:DXTabControl.View>
<dx:TabControlMultiLineView HeaderLocation="Bottom"/>
</dx:DXTabControl.View>
<dx:DXTabItem Header="Main">
<dxdo:DockLayoutManager>
<dxdo:LayoutGroup>
<dxdo:LayoutPanel Caption="TaskList">
<views:DxTaskList x:Name="Tasklst" />
</dxdo:LayoutPanel>
<dxdo:LayoutPanel Caption="TaskDetails">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Focusable="False">
<StackPanel>
<views:TaskDetails x:Name="TaskDtls"/>
</StackPanel>
</ScrollViewer>
</dxdo:LayoutPanel>
</dxdo:LayoutGroup>
</dxdo:DockLayoutManager>
</dx:DXTabItem>
</dx:DXTabControl>
As you can see you're supposed to add the View property and then assign it a value, which I used a TabControlMultiLineView, and that object had a HeaderLocation property to which I set it to one of the valid enums. When I did this, the tabs appeared at the bottom.
I want to show the current index of an item in an itemscontrol:
<TextBlock Foreground="#ffffffff" Margin="8,8,2,2" TextWrapping="Wrap" Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Items.CurrentIndex}" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Right"/>
This is my best guess. I've come across many possible solutions, but working with alternationcount (not supported in silverlight as it seems) or other didn't give me a result.
The itemscontrol looks like this:
<ItemsControl Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" Grid.Row="6" ItemsSource="{Binding Alternatives, Mode=TwoWay}" ></ItemsControl>
The list bound to the itemscontrol is a simple object with some properties.
I really like to do this in XAML, as we reuse that object on alot of pages.
Any good suggestions would be great.
PS: I don't want the index after interaction from the user, it should be retrieved automatically.
if you want the index of an item in an itemscontrol - it just make sense for me if there is some sort of selection. but the itemsscontrol has no selector and so no selection and so no selectionchanged event. so if you want some selection take listbox
one more thing
<ItemsControl ItemsSource="{Binding Alternatives, Mode=TwoWay}" ></ItemsControl>
mode=twoway makes no sense, cause your itemsscontrol will never set the underlining source.
EDIT: i just assume what you want from your comment. you can use a ICollectionView to iterate through your items. but your Itemscontrol can not show this of course. but you can alter the item itself to show the iteration
ICollectionView view = CollectionViewsource.GetDefaultView(Alternatives);
view.CurrentChanged += (s,a) =>
{
var current = this.view.CurrentItem;
//to stuff with your current item here
};
elsewhere where you want to iterate
view.MoveCurrentToNext();
you should handle first and last item and that stuff too.