I am new to XAML / Xamarin.forms and come from a web-development background.
I am looking to make a box containing with text and images (like that can be done using a <div> in HTML). Please explain how to approach this with XAML & Xamarin.forms.
Also, if anybody knows a resource that lists the available tags in XAML (like w3schools for HTML), please pass that on to me.
Thanks in advance :)
Why not check out the Xamarin documentation on this? It is quite extensive and should help you with the basics!
There isn't a exact equivalent of a div. It depends on what you want to do. It all starts with a Page. You see the types of pages below.
That will be the base of your app. Within this Page you can have one VisualElement, which kind of forces you to use a Layout.
Here you see all the layouts that are available to you;
The good news is you can nest Layouts!
In a Layout you can specify your controls (of type View).
To get back to your question; the behaviour is different than a div. If you take a StackLayout for example your nested controls will be stacked on top of each other and you don't have to worry about spacing, margin, etc. Another option is to go for a Grid which gives you a bit of flexibility.
So it's not just a container it also means something in terms of how it is placed on the screen.
I also explain some basics on my blog here and here but there are a lot of resources out there which can help you get started.
Just use a Frame:
<StackLayout>
<Frame x:Name="MyPanelABC">
<Label Text="My Stuff" />
</Frame>
</StackLayout>
private void setupPanelABC(bool isVisiblePanelABC){
MyPanelABC.IsVisible = isVisiblePanelABC;
}
Related
Writing a fairly simple app with c#/wpf.
When opening a second window there is a brief flicker or flash.
Extensive googling says that this caused by screen repainting, so not much I can do about that.
(I haven't included any code because it seems this problem is well known and something most people 'learn to live with')
So, I thought, why not put all the XAML in one file with each page within its own grid that I can hide/show with visibility.visible or visibility.collapsed etc.
Works nicely (apart from a very slight delay - less than 1/2 second - the first time i show the second window grid), but I'm unhappy at the idea of containing all the code behind in a single page. (for what its worth, i'm told that compiler see's it all as one file anyway but ... )
Is there a way I can create separate 'code behind files for each 'windows' (in reality a XAML Grid) functionality whilst linking them all to the same Xaml File?
(I have a horrible feeling having typed this that the answer is obvious and I should already know it ...)
Thanx
If I understand you correctly, you just need to create a new Control Class-Code Behind pair for each 'window grid'. This is done in VS by clicking Add-Create Element-User Control (of name UserControl1.xaml, rename it to something Like YourControl.xaml) in Solution Explorer (I think you already know all this, but just in case).
Now, if there is no specific requirement for the control to be of type Grid, you can use it as it is:
<MainWindow>
<Grid>
<YourControlNumberOne />
<YourControlNumberTwo />
<YourControlNumberThree />
<Grid/>
</MainWindow>
If you specifically need Grid-based control, just change the base class of YourControl to Grid, and change the topmost XAML element in the associated XAML file to Grid.
I work with C# (MVC) to generate websites. We use Bootstrap to position elements.
If I wanted to let a page have a toggle to display a menu either vertically or horizontally, what is my best design approach?
If I wasn't using Bootstrap or C# I might produce an XML file with the data to be displayed. The XML would be marked up with with no thought of how it would be displayed.
So it might look like this for example:
<page>
<footer>This most likely will render at bottom of page</footer>
<menu>
<ol>
<li>Home</li>
<li>Foo</li>
<li>Bar</li>
</ol>
</menu>
<content>Some page content here</content>
<header>This most likely will render at top of page</header>
</page>
...and then maybe use XSLT (along with CSS) to transform that page so visually elements would be positioned as I chose (menu at top, side, bottom, wherever) based upon the selected theme/layout.
Is there a standard way to do allow for dynamic layouts using Bootstrap when working with C# and razor files? Is an #IF statement in my razor file that renders a different row/column layout my best/only choice?
Maybe there is a standard markup so that you can easily switch between different themes with different layouts? Although I don't see this documented if so.
I've spent the last hour Googling this without much luck.
I would recommend you look on the various web sites that provide this sort of functionality (some $$ some free) . I used one on a project last year, and TBH it would have taken a HTML/CSS/js expert 6 months to create all the included features from scratch (and it cost less than $50).
Check Jquery Menus. You can toggle Vertical to Horizontal using css. Refer this post - How to make jQuery UI nav menu horizontal?
If you want to specifically use Bootstrap then check Bootstrap Navbar. I believe you can use CSS to toggle here as well.
In my opinion, for changing layouts we should always use css. The advantage is, page will not be reloaded if the layout/viewport changes and we do not need to maintain separate codebase. This is why we use responsive webdesign which makes use of css to update the look and feel based on size of the device (4K, desktop, tablet, mobile etc.)
I think what I'll end up doing is making one shared View per type of layout:
~/Views/Shared/_Layout.cshtml
~/Views/Shared/_leftMenuLayout.cshtml
etc
... and then I'll create file "Views/_ViewStart" and in this file set the default shared layout I want used based on the desired layout. ie:
Layout = "~/Views/Shared/_leftMenuLayout.cshtml";
I know that you aren't supposed to add more than 7 items to a pivot control, but it's just dead easy to use.
I wasn't even running into problems until now: I got a pivot item template which renders articles (Say, date, title, content). I'm using a pivot because when flicking the article I want to go the next/previous one. However, after a number of flicks (~50, little abyssmal) I get an OutOfMemoryException. The memory usage suggests, that PivotItem contents are generated on the fly when first accessed, but then they aren't released.
I could hook into UnloadedPivotItem/LoadedPivotItem (works well for image viewing and the Source property) and clear the visual trees, but that would mean that I had to generate the contents for every view model "by hand".
So: Is there any possible way to specify how big that cache should be? Or at least a sane way to regenerate the PivotItem content from a given ViewModel?
I would recommend using Telerik's SlideView control. In my mind, there is no reason to not use Telerik's control (I do not work for, nor endorsed by Telerik). You can download the Telerik Examples app from the store to see it being used. This control is exactly what you need. It works just like any other ItemsControl would. You set the ItemsSource and ItemTemplate.
<telerikPrimitives:RadSlideView ItemsSource="{Binding Articles}"
IsLoopingEnabled="False" <!-- Will NOT go back to the beginning -->
ItemRealizationMode="ViewportItem">
<telerikPrimitives:RadSlideView.ItemTemplate>
<DataTemplate>
<Grid Margin="12,0,0,0">
<!-- Content ->
</Grid>
</DataTemplate>
</telerikPrimitives:RadSlideView.ItemTemplate>
</telerikPrimitives:RadSlideView>
I'm trying to style some wpf user controls to make them look the same i have in my web application. I found some really great example for every control i need except for sliders and radio buttons.
Here is how they should look like:
Slider:
Radio Button:
I know i should create some ControlTemplate but i don't really know where to start...
If you can provide a complete example it would be perfect, but i guess that even some good deep advise would fit my needs.
Thank you 1000!
I have style sample here. It renders this:
I would start with Control Styles and Templates on MSDN pages. There are examples for most controls which give a good overview of how the control template works. Also you can extract/download the original control template and try to make your changes to it. Download default control templates
P.S. Actually the slider example on the first link resembles the one you describe.
Try using Expression Blend.
Learn Expression
and specifically this video: Creating ControlTemplates.
Expression Blend is something like a XAML design application - you can size, colour, adjust fill and stroke etc on all the elements in a control. It takes a little while to get used to, but you will be able to design controls with a graphical UI and Expression will provide you with the appropriate XAML to use in your project.
I have a page with multiple panels on it. When a user clicks on a button one panel becomes invisible and another becomes visible. I was wondering if it is possible to dim the entire page except for the panel that has just become visible?
The asp.net panels will be rendered as
<div>
in the html, so why not write some javascript which which sets these to hidden? You could give them a class which you use to identify what to hide e.g.
<div class="container">
and then hide all the divs based on that. As Tim B James suggests, JQuery is great for doing this kind of thing, and can give you animations, fading, delays etc, which are really easy to get started with.
If you'd rather do it in the code-behind, you could loop through all the panels, finding and hiding them programmatically. Then show the correct one. This solution might be best if you have complex validation or something needed for the panel contents.
If you are not afraid to dip into some jQuery, then I would take a look at the jQuery Tools Exposure feature. Found here http://flowplayer.org/tools/demos/toolbox/expose/index.html
If you view the demo, this might be what you are looking to achieve. It is also very easy to set up, with minimal coding.