I am relatively new to the world of Xamarin.Forms and have a question with regard to Xamarin TableView.
I want to create a layout similar to the one shown below.
Question is, can I use TableView for this or is there an another option for this? Can anyone show this with XAML code please?
Thanks in advance.
Edit: Tabs in the bottom are not required.
I don't mean to be rude, but this is very easy to retrieve from the documentation pages and a bit of trying yourself.
To get you started, try this:
<TableView Intent="Settings">
<TableView.Root>
<TableView.Section>
<ImageCell Text="Invoice Customization" Source="Invoice_image.png" />
<ImageCell Text="Invoice Defaults" Source="Invoice_image.png" />
</TableView.Section>
<TableView.Section Title="Security">
<SwitchCell Text="Use Touch ID" />
</TableView.Section>
... etc.
</TableView.Root>
</TableView>
The arrows at the end of the cells and the footer text underneath the Security section are not possible with Xamarin.Forms out of the box, this will probably require you to write a custom renderer.
Related
I am just getting started with Xamarin Forms, so please excuse what may well be a rookie question...
I started out with a new Shell Forms App in Visual Studio, so some code was generated for me.
There is an AppShell page which contains a TabBar control. Inside this are Tab controls were I can set my ShellContent pages.
Each Tab has an Icon property, but this apparently only accepts PNG icons.
How can I use an icon font (which is already hooked up to display icons correctly as I am using them in the content of another page) for my Tab icons in Xaml?
I am using Xamarin.Forms 4.0.0.497661
You have to use FontImageSource to do that.
<Tab Title="MyTitle">
<Tab.Icon>
<FontImageSource FontFamily="{StaticResource IconFont}" Glyph="" Size="Small"/>
</Tab.Icon>
...
</Tab>
The solution below worked for me.
Copied the files from fontawesome inside Assets folder
fa-brands-400.ttf
fa-regular-400.ttf
fa-solid-900.ttf
Important the reference "Font Awesome 5 Brands" according to icon needed
<Tab.Icon>
<FontImageSource FontFamily="fa-brands-400.ttf#Font Awesome 5 Brands" Glyph=""/>
</Tab.Icon>
That's a great question. You can't use the tab icon property in a straight forward way to accept the icon font, unless you convert it into a PNG.
If you want to go that route, you can try this, you might have to deal with permissions for saving images. Worth a try!
You can do that with custom renderers as a workaround. Check this example on GitHub here: https://github.com/winstongubantes/Xamarin.Forms/tree/master/CustomIconizeFont
Every time I use a menu with MenuItems, the sub-MenuItems align right by default. They do so no matter what I put for the HorizontalAlignment property. Even when I type a relatively simple example:
<Grid>
<Menu Height="23" VerticalAlignment="Top">
<MenuItem Header="_File">
<MenuItem Header="_New" />
</MenuItem>
</Menu>
</Grid>
The "New" MenuItem aligns right relative to the "File" MenuItem. For what it's worth, it looks normal in the preview using Visual Studio, just not when I actually run it.
There is space on the left hand side of the text to accompany the IsCheckable checkbox. You can see it in action using the following code:
<MenuItem Header="_New" IsCheckable="True"/>
If you want to remove this spacing, consider using a ControlTemplate to override the default MenuItem template.
I apologize, apparently I didn't search hard enough for other posts with the same problem. This user had the same problem (and did a better job of illustrating it), and the solution posted there worked perfectly. The issue was that since my computer is optimized for touch technology, the default is to align sub-MenuItems so that right-handed users' hands won't get in the way.
I've used the Multilingual Toolkit to translate my app and have been testing it using pseudo-language. It works fine for strings I have translated in code (C#) but I can't work out how to make it so that the tag in XAML is automatically translated.
I've been using http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh965329.aspx as a tutorial but I can't figure it out. I've also searched on Google but still no luck.
For example, I created a "Watermark" text box (which inherits from TextBox which shows some text in by default it the user has not entered any text and the item does not have focus. The XAML looks like this (I replaced generic positioning stuff with '...'):
<local:WatermarkTextbox x:Name="TitleTextBox" Watermark="MainPage_EnterATitle" ... Style="{StaticResource TextBoxStyle1}" />
As you can see it is setting a property called Watermark with a 'tag' of the resource name that is being translated using the Multilingual tool. I'm not sure how to get this to automatically translate.
Another example is using the bottom app bar buttons:
<Button x:Name="bottomAppBar_unpinFromStartButton" AutomationProperties.Name="MainPage_UnpinFromStart" Style="{StaticResource UnPinAppBarButtonStyle}" Click="bottomAppBar_unpinFromStartButton_Click"/>
And I can see in the link above that it says:
MediumButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name
But I'm not really sure where this is meant to go.
Even with a button, which seems like it would be the simplest to translate I can't get it to work. The XAML is:
<Button x:Name="RemovePhotoButton" x:Uid="MainPage_RemovePhoto" Content="" HorizontalAlignment="Center" Margin="222,0,974,78" Grid.Row="1" VerticalAlignment="Bottom" Width="170" Height="45"/>
But when ran in the app or viewed in the designed the button stays blank, with no text on it.
The Resources are set up like this:
And it is filling the translated documents fine:
I am able to translate it in C# using the code from the link above, just not using XAML.
Just wondering if anybody could help me out or point me in the right direction to solve this.
Thanks
First what i think is missing in the name of your resources is the property that you want to set. While never used it myself, i would understand it like this:
Your xaml needs to be changed to
<local:WatermarkTextbox x:Name="TitleTextBox" x:Uid="MainPage_EnterATitle" Watermark="" ... Style="{StaticResource TextBoxStyle1}" />
And your resource needs an entry with the key
MainPage_EnterATitle.Watermark
And about the part with the
MediumButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name
This is only used if the referenced property is an attached property. Like if your Watermark property would be attached not part of the control. But in your case its not important.
I've been trying to get an App bar implemented in a WinRT metro app (C# / XAML), but don't know where to begin. I've tried using the <ApplicationBar/> tag and I get a Type not found error.
There's no help online, could someone update this post with the answer so that it'll serve as a reference to other programmers as well?
There's only a JavaScript sample which isn't of much help.
This should work:
<AppBar
VerticalAlignment="Bottom">
<Button
AutomationProperties.Name="Play"
Style="{StaticResource PlayAppBarButtonStyle}"
Command="{Binding PlayCommand}" />
</AppBar>
– you would put that in the layout root grid of your page.
*EDIT
Note: According to documentation - you should put it in Page.BottomAppBar property, although at least in Windows 8 Consumer Preview - it works fine when used in any Grid, which is convenient if your UI isn't tightly coupled to a Page control.
*EDIT 2, response from MSFT:
The recommended approach is to use the Page.BottomAppBar/TopAppBar properties.
There are known hit-testing issues in the Consumer Preview if AppBars are added without using these properties
The AppBars do not use the proper animations if they are added without using these properties
If AppBars are added as children of arbitrary elements then it's easier for multiple controls to attempt to create/modify AppBars, resulting in an inconsistent user experience
*EDIT 3
The CustomAppBar in WinRT XAML Toolkit can be used anywhere, animates based on Vertical/Horizontal-Alignment, can have other content overlaid on top of it and also has a CanOpen property that allows to block it from opening.
<Page.TopAppBar>
<AppBar>
<TextBlock x:Name="TextBlock1" Text="Sample Text" Margin="0,0,0,0" Height="Auto" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</AppBar>
</Page.TopAppBar>
I'm trying to design a UI that contains nested tabs, but I can't seem to find information on how to remove the nested tabs in an MVVM fashion.
Here's my XAML (snipped for brevity):
<TabControl Name="ProjectTabControl" DockPanel.Dock="Top" ItemsSource="{Binding ProjectTabs}" IsSynchronizedWithCurrentItem="True">
<TabControl.ContentTemplate>
<DataTemplate>
<TabControl DockPanel.Dock="Top" ItemsSource="{Binding FileTabs}" Padding="1">
<Button Command="{Binding CloseTabCommand}" CommandParameter="TabItem" />
</TabControl>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
My question is: what argument(s?) should I be passing in CommandParameter, and how would I affect it in the ViewModel to properly remove the tab?
It doesn't look like you have a solid understanding of how to implement an M-V-VM pattern in WPF. It looks like you know understand DataBinding but the pattern your sample demonstrates seems to be missing an understand of ViewModels and Commands, which are really required for MVVM.
Review the article linked below and the sample application it uses. You should find what you're looking to do is demonstrated here and is pretty easy to implement.
The Model-View-ViewModel (MVVM) Design Pattern for WPF
I hope that this doesn't seem like a cop-out but it would require a significant amount of re-posting of the linked article to get you where you want to go. Go read the article, work through the sample and if you still have problems, post on this question and I'll make sure to watch for it.