Referring to my previous question, I need some help making the listview items responsive on all the platform, all the sizes and also on landscape and portrait mode. The listview which I have now becomes tiny on a 10" screen. I would like to make it responsive. Any reference to achieve this?
It sounds like you have some kind of fixed width issue perhaps if your ListView is small and not covering the entire page?
On your mainList you are setting to the ContentPage without any layout options.
Try setting the HorizontalOptions and VerticalOptions of the outer element first, and once you get that working, focus on the inner controls to ensure they take up the desired amount of space afterwards.
o.HorizontalOptions = LayoutOptions.FillAndExpand;
o.VerticalOptions = LayoutOptions.FillAndExpand;
Change the ListView BackgroundColor to some noticeable color to help you ensuring that things are laying out correctly.
Every Xamarin.Forms.Element(and therefore every page) implements a Width and a Height property, you can use these to adjust your layout depending on Page-Size.
You should take a loot at this page regarding the VisualElement class https://developer.xamarin.com/api/type/Xamarin.Forms.VisualElement/
You could also use Device.Idiom to check if you are on a phone or Tablet and handle each case individually:
if (Device.Idiom == TargetIdiom.Phone)
//your code goes here
else
if (Device.Idiom == TargetIdiom.Tablet)
//your code goes here
else
throw new PlatformNotSupportedException();
For landscape/protrait simply check with the Width/Height-Properties of your page:
if (Width > Height)
{
//"landscape"
}
else
{
//"portrait"
}
For handling Orientation changes implement an Event-Handler for SizeChanged or simply overwrite OnSizeAllocated (https://developer.xamarin.com/api/member/Xamarin.Forms.VisualElement.OnSizeAllocated/p/System.Double/System.Double/)
Related
I am creating a custom title bar for my uwp app. I want to match the height of the system bar.
I might be able to get that height be calling
CoreApplication.GetCurrentView().TitleBar.Height
But that depends on a lot of things. The title bar may not have been sized yet.
I've also seen a suggestion (from winforms) to look at the difference of the y coordinates of the window top and the content view top. But again that seems fishy. For one thing, once I've set ExtendViewIntoTitleBar to true, I don't think the method would work.
Is there reliable way to programmatically get the default height?
I know that this answer might not be useful to the person who initially asked, at this point of time, but I would still like to suggest the answer:
You can register a handler for when the size of title bar changes. (The docs mention size change, but it may only be the caption button offset and not height)
This piece of code works well for me, at least at the moment
//Put the below line in the Page initialization/OnNavigated function
var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;
coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;
private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
MyAppTitleBar.Height = sender.Height;
}
The above code calls your function (CoreTitleBar_LayoutMetricsChanged) automatically whenever the dimensions of the titleBar change (like change in DPI). Here, MyAppTitleBar is a Grid I made for my custom title bar.
Futher info can be found here
hello I have the following problem: I want to draw a rectangle on the canvas with methods Canvas.SetLeft() and Canvas.SetTop().
I use the method UserControl_Loaded() and everything works.
the problem is that having ActualWidth when resizing the window and therefore the grid, the value does not change and I left with the values no longer accurate.
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
Rectangle rett = new Rectangle();
rett.Height = grid1.ActualHeight-10;
rett.Width = grid1.ActualWidth -10;
rett.Fill = new SolidColorBrush(Colors.LightBlue);
canv.Children.Add(rett);
Canvas.SetLeft(rett, 10);
Canvas.SetTop(rett, 10);
}
this is the xaml:
<Grid x:Name="grid1">
<Canvas x:Name="canv" Height="auto" Width="auto"></Canvas>
</Grid>
in the first picture it is fine when not resize the window.
the second when I resize the grid remains the previous width.
I want the width of the rectangle was updated when changing the width of the grid.
Thank you.
Without a good, minimal, complete code example that clearly illustrates your question, along with a detailed explanation of what you're actually trying to accomplish (especially in a broader sense), it is impossible to know for sure what the best answer in your case would be.
Taking your question literally, it seems one possible approach would be to bind the Rectangle dimensions to the Grid's dimensions, so that they are updated as the Grid changes size. You can use IValueConverter to subtract the appropriate amount from the actual dimensions.
But that's a fairly complicated solution for what would otherwise be a reasonably simple problem, and especially so given that you seem to be doing this in code-behind for some reason (not ideal in the first place, and setting up bindings in code-behind is particularly tedious).
Idiomatically, what you should probably be doing is not putting the Rectangle in the Canvas at all, but rather making it a child of the Grid directly. Then you can set its alignments to Stretch so that it will fill the grid cell it's in. Finally, you can set its margins so that you have the 10 pixel gap on the top and left, and no gap on the right and bottom.
For example:
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
Rectangle rett = new Rectangle();
rett.Fill = new SolidColorBrush(Colors.LightBlue);
// NOTE: technically don't need to set these, as Stretch is the default value!
rett.HorizontalAlignment = HorizontalAlignment.Stretch;
rett.VerticalAlignment = VerticalAlignment .Stretch;
// 10 pixels of margin on top and left, none on right and bottom
rett.Margin = new Thickness(10, 10, 0, 0);
grid1.Children.Add(rett);
}
Doing it as above allows the XAML layout engine to automatically handle the resizing behavior you are looking for.
All that said, I would definitely encourage you to implement this in XAML instead of code-behind. There are a lot of things code-behind is good at, but frankly XAML is much better at any of the things directly related to the configuration of your GUI object graph.
In my metro application i want to design the pages that satisfy for all resolutions. For that i used the Viewbox control and set the height=768 and width=1366 for the control inside the Viewbox.In this case the design is satisfied for all resolution except 1024*768 and 1280*800.
How can I design the pages that satisfy for every resolution.Please help me?
hi heres the code piece that will solve ur issue.
//add event listner on size changed
Window.Current.SizeChanged += Current_SizeChanged;
here's the code inside the event listener or any other custom method where you would like to get the height and width and do all the stuff :
var height = Window.Current.Bounds.Height;
var width = Window.Current.Bounds.Width;
this will give you the height and width of the app. (I write app here because a metro can run also in snapped mode) ... According to this then you can do all manipulations with your controls.
I'm trying to create an animation similar to the AppBar - basically make a control come in from the bottom edge of the screen. The problem with this is that the height of the control can change depending on its content, so I can't set an initial TranslateTransform.Y value in the XAML or in the Loaded event because the contents get generated AFTER the page is loaded.
So, in other (and fewer) words. I need to animate a control for which I don't know its size into the screen. Any ideas?
Thanks in advance.
You can use a Transition.
E.g. PaneThemeTransition or EntranceThemeTransition.
I'm not sure which property you should use to add a transition because it depends on your case. But you can do something like this:
Popup.ChildTransitions = new TransitionCollection { new EntranceThemeTransition() };
The Popup is not mandatory:
<uielement>
<uielement.Transitions>
oneOrMoreTransitions
</uielement.Transitions>
</uielement>
Animations
I have a ComboBox that I have set DrawMode = DrawMode.OwnerDrawFixed. Then I handle the OnDrawItem event and everything works perfectly. However, it looks very different from a standard ComboBox because mine doesn't seem to be rendered using VisualStyles. Do I need to do something to specifically enable VisualStyle rendering for my owner drawn control? I have tried SetWindowTheme on my control, but I'm not sure what theme class to send. Any help would be much appreciated. Thanks!
The down side of owner-draw is that when you turn it on, the owner (you) has to draw everything. You are almost completely on your own.
If you want visual styles, then you have to call the VisualStyles APIs directly to do what you want. If you want to show selected, focussed, enabled/disabled states, then you have to write code to deal with them all.
This isn't a direct answer for your combo-box issues, but as an example of how to use VisualStyles, here is how I've used VisualStyles in an owner-drawn TreeView to draw the Plus/Minus icon:
// Draw Expand (plus/minus) icon if required
if (ShowPlusMinus && e.Node.Nodes.Count > 0)
{
// Use the VisualStyles renderer to use the proper OS-defined glyphs
Rectangle expandRect = new Rectangle(iconLeft-1, midY - 7, 16, 16);
VisualStyleElement element = (e.Node.IsExpanded) ? VisualStyleElement.TreeView.Glyph.Opened
: VisualStyleElement.TreeView.Glyph.Closed;
VisualStyleRenderer renderer = new VisualStyleRenderer(element);
renderer.DrawBackground(e.Graphics, expandRect);
}