I am using the excellent Modern UI Charts for creating a Doughnut chart in my Windows 8 application. But I haven't been able to customize it much which has led me to look for other ways to create a doughnut chart. I would be very happy if anyone could answer my below questions on how to customize the Modern UI chart or if not then please do suggest on how i can implement my own Doughnut chart or any other FREE library which i can use to implement it.
Customizability questions on Modern UI charts:
How to increase the size of the Doughnut chart ? (Major Issue)
How to show percentages instead of numbers on the chart ? I know I can calculate the percentages and pass them to the chart but I will still not see the "%" symbol on the UI which will confuse the user as to whether the numbers are actual statistic number of percentages (Minor Issue)
Is there any way I can show the legend items vertically rather than horizantally ? (Minor Issue)
I would be happy if atleast I can increase the size of the chart otherwise I will have to look at a totally new way to create doughnut charts. Any lead or help on creating doughnut charts will be deeply appreciated. Thank you
1) You should be able to set the size of the chart. Try changing the chart style. If it's a larger PlottedArea that you want, the styles for those are in there as well.
2) You should be able to change the style for the PiePieceLabel. You can either set one for a given control or all over. Below is an example for setting it globally.
<Style TargetType="charts:PiePieceLabel">
<Setter Property="Background" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="charts:PiePieceLabel">
<Border>
<!-- Changed it to a StackPanel -->
<StackPanel Orientation="Horizontal">
<TextBlock Text="{TemplateBinding Value}" />
<!-- May need a margin -->
<TextBlock Text="%" />
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
3) Yes. Same deal. Find the Legend style. Change it to display vertically.
Related
I have downloaded a font from fonts.google.com and would like to set the font family for all labels in my Xamarin Forms app.
Adding the following code to all labels seems like an excessive amount of work
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<OnPlatform.Android>Mogra-Regular.ttf#Mogra-Regular</OnPlatform.Android>
</OnPlatform>
</Label.FontFamily>
Ideally I would set the font family in the Resource Dictionary where I've already succesfully set text colour and font attributes, however, I've been unsuccesful in doing so.
I have managed to change the font family using a custom renderer but the moment I alter the label text colour or font attributes using dynamic resources the font family is reset to default.
Is there any way that will allow me to universally use my custom font and still be allowed to dynamically change other aspects of any given label?
Create an implicit Style (a Style without an x:Key) in your App.xaml and it'll be applied to all Labels
<Style TargetType="Label">
<Setter Property="FontFamily">
<Setter.Value>
<OnPlatform x:TypeArguments="x:String">
<OnPlatform.Android>Mogra-Regular.ttf#Mogra-Regular</OnPlatform.Android>
</OnPlatform>
</Setter.Value>
</Setter>
</Style>
I Have a label set to relative positioning and auto size as shown below
<Style TargetType="Label">
<Setter Property="BackgroundColor" Value="Transparent" />
//Something like below?
<Setter Property="AbsoluteLayout.LayoutFlags" Value="PositionProportional | SizeProportional" />
</Style>
....
<Label Text="0" AbsoluteLayout.LayoutBounds="0.5, 0.00499999999999998, AutoSize, AutoSize"/>
Is there a way to specify multiple LayoutFlags in XAML?
As I run the code on devices with higher resolution the relative position of the label is correct but the size (font) of the label does not increase, although it is set to AutoSize. I figured I also needed to specify a LayoutFlag for the Label that is SizeProportional as well as PositionProportional. But how to do it in XAML? Currently the fonts don't resize when the device is rotated to landscape orientation.
As you can read here :
AbsoluteLayout on Xamarin Documentation
Flags are also specified in the declaration of views in the layout
using the AbsoluteLayout.LayoutFlags property. Note that flags can be
combined in XAML using a comma-separated list.
So in your case, there is no point since you want to use the All value (using both Positionning and Sizing proportionnaly).
But I had to use something like this and it works just fine :
<StackLayout AbsoluteLayout.LayoutBounds="0,1,1,100"
AbsoluteLayout.LayoutFlags="XProportional,YProportional,WidthProportional">
</StackLayout>
Hope it will help people like who googled it and found this post :)
In a windows UWP app project, I am trying to define a Thickness by assigning to its Left, Top, Right and Bottom properties:
<Setter Property="Margin">
<Setter.Value>
<Thickness Left="{StaticResource SomeDouble}"
Top="0"
Right="0"
Bottom="0" />
</Setter.Value>
</Setter>
This answer seems to suggest that this is possible in WPF, however, in my UWP project (as well as in a WinRT app), I get the following error:
XAML Thickness type cannot be constructed.
In order to be constructed in XAML, a type cannot be abstract, interface, nested, generic
or a struct, and must have a public default constructor.
Is there a way to define the Thickness using resources?
You still can. Only to change System:Double to x:Double. e.g.
<x:Double x:Key="SomeDouble">12</x:Double>
Update
Interesting, with the above xaml the designer shows up fine but it doesn't compile... Yes it gives the exact same error like you showed.
So I guess you have to define the whole Thickness in xaml.
<Thickness x:Key="Thickness1">12,0,0,0</Thickness>
<Setter Property="Margin" Value="{StaticResource Thickness1}" />
I ran the project this time and yeah it worked. :)
I created an ItemsControl element in my XAML page. I added an animation when the new items are being added through the following style:
<Style TargetType="ItemsControl" x:Key="NotificationsList">
<Setter Property="ItemContainerTransitions">
<Setter.Value>
<TransitionCollection>
<EntranceThemeTransition FromHorizontalOffset="-40" FromVerticalOffset="0" />
</TransitionCollection>
</Setter.Value>
</Setter>
</Style>
This is great; the items slide in from the left as they get added.
Now, I need to add an animation for removal of items. I have two challenges:
How to apply an animation on an item when the object is removed from the bound ObservableCollection? For example, something like ExitingThemeTransition.
The items that get removed are always from the bottom of the ItemsControl. This causes the remaining items to just drop down by the height of the removed items, which seems to be difficult to follow. How do I make the animation that would gracefully move down the remaining items? Is that possible?
I am using Universal Windows Apps API (Windows 10 / WinRT). Thanks!
Comboboxes in WinRT have a default ItemsPanel of type CarouselPanel. This gives Windows 8.1 apps an "infinite loop" when scrolling combobox items.
If you don't want this behaviour, there are a lot of blog posts explaining how to "fix it".
For example this: Cancel WinRT ComboBox infinte scroll effect
or: http://netitude.bc3tech.net/2013/04/12/windows-8s-combobox-and-the-carouselpanel/
The problem with this solution is that you get a weird behaviour on the first item in the combobox.
How to reproduce:
Create a new blank Windows 8.1 app
In mainpage.xaml put:
<TimePicker Time="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
Create a style.xaml resource dictionary like this:
<Style TargetType="ComboBox">
<Style.Setters>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
Now start the app, select an item down the list (for example '05' minutes), then select the first item in the same dropdown (for example '00' minutes). The text in the dropdown control will now disappear.
Anyone know how to fix this? If I change the style of combobox itemspanel back to CarouselPanel it works (but with the infinite loop of course).
Just corrected this issue using a VirtualizingStackPanel in place of a StackPanel.
We had to set a size cause otherthise it take all the width of the screen.
<VirtualizingStackPanel HorizontalAlignment="Center" Width="150"/>
We didn't try to get a more flexible solution because we don't need it yet
Hope it will help you
StackPanel just not working with ComoboBox the possible solution is changing it to VirtualizingStackPanel, but you must bind with to the parent, otherthise it will stretch to screen width.
<ComboBox Name="ReasonComboBox"">
<ComboBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Width="{Binding ActualWidth, ElementName=ReasonComboBox}"/>
</ItemsPanelTemplate>
</ComboBox.ItemsPanel>
</ComboBox>