I am writing a Windows Phone Application (WinRT 8.1).
I added a Piechart from WinRT XAML Toolkit having 6 items in it. The default PieChart has only 3 colors. So, I added 6 ResourceDictionaries in it. The index of this PieChart is in 6 colors but PieChart is still showing in 3 colors.
Screenshot:
Uploaded ScreenShot
XAML:
<Charting:Chart Name="Question">
<Charting:Chart.Palette>
<Charting:ResourceDictionaryCollection>
<!-- Lemon Green -->
<ResourceDictionary>
<SolidColorBrush
x:Key="Background"
Color="#FFA5C127" />
<Style
x:Key="DataPointStyle"
TargetType="Control">
<Setter
Property="Background"
Value="{StaticResource Background}" />
</Style>
<Style
x:Key="DataShapeStyle"
TargetType="Shape">
<Setter
Property="Stroke"
Value="{StaticResource Background}" />
<Setter
Property="StrokeThickness"
Value="2" />
<Setter
Property="StrokeMiterLimit"
Value="1" />
<Setter
Property="Fill"
Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
<!-- Blue -->
<ResourceDictionary>
<SolidColorBrush
x:Key="Background"
Color="#FF0E749B" />
<Style
x:Key="DataPointStyle"
TargetType="Control">
<Setter
Property="Background"
Value="{StaticResource Background}" />
</Style>
<Style
x:Key="DataShapeStyle"
TargetType="Shape">
<Setter
Property="Stroke"
Value="{StaticResource Background}" />
<Setter
Property="StrokeThickness"
Value="2" />
<Setter
Property="StrokeMiterLimit"
Value="1" />
<Setter
Property="Fill"
Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
<!-- Red -->
<ResourceDictionary>
<SolidColorBrush
x:Key="Background"
Color="#FFA60606" />
<Style
x:Key="DataPointStyle"
TargetType="Control">
<Setter
Property="Background"
Value="{StaticResource Background}" />
</Style>
<Style
x:Key="DataShapeStyle"
TargetType="Shape">
<Setter
Property="Stroke"
Value="{StaticResource Background}" />
<Setter
Property="StrokeThickness"
Value="2" />
<Setter
Property="StrokeMiterLimit"
Value="1" />
<Setter
Property="Fill"
Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
<!-- Green -->
<ResourceDictionary>
<SolidColorBrush
x:Key="Background"
Color="#FF54BD0B" />
<Style
x:Key="DataPointStyle"
TargetType="Control">
<Setter
Property="Background"
Value="{StaticResource Background}" />
</Style>
<Style
x:Key="DataShapeStyle"
TargetType="Shape">
<Setter
Property="Stroke"
Value="{StaticResource Background}" />
<Setter
Property="StrokeThickness"
Value="2" />
<Setter
Property="StrokeMiterLimit"
Value="1" />
<Setter
Property="Fill"
Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
<!-- Sky Blue -->
<ResourceDictionary>
<SolidColorBrush
x:Key="Background"
Color="#FF08A4DE" />
<Style
x:Key="DataPointStyle"
TargetType="Control">
<Setter
Property="Background"
Value="{StaticResource Background}" />
</Style>
<Style
x:Key="DataShapeStyle"
TargetType="Shape">
<Setter
Property="Stroke"
Value="{StaticResource Background}" />
<Setter
Property="StrokeThickness"
Value="2" />
<Setter
Property="StrokeMiterLimit"
Value="1" />
<Setter
Property="Fill"
Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
<!-- Dark Brown -->
<ResourceDictionary>
<SolidColorBrush
x:Key="Background"
Color="#FF3A0401" />
<Style
x:Key="DataPointStyle"
TargetType="Control">
<Setter
Property="Background"
Value="{StaticResource Background}" />
</Style>
<Style
x:Key="DataShapeStyle"
TargetType="Shape">
<Setter
Property="Stroke"
Value="{StaticResource Background}" />
<Setter
Property="StrokeThickness"
Value="2" />
<Setter
Property="StrokeMiterLimit"
Value="1" />
<Setter
Property="Fill"
Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
</Charting:ResourceDictionaryCollection>
</Charting:Chart.Palette>
<Charting:PieSeries
IndependentValuePath="Item1"
DependentValuePath="Item2"
IsSelectionEnabled="False"/>
</Charting:Chart>
C#:
List<Tuple<string, int>> QuestionList = new List<Tuple<string, int>>()
{
new Tuple<string, int>(Str1, v1),
new Tuple<string, int>(Str2, v2)
};
Question.Title = "Pie Chart";
(Question.Series[0] as PieSeries).ItemsSource = QuestionList;
Rebuild the Project.
Remove testing app from mobile.
Reinstall the app.
Related
When I set Height or Width, the transitions do not work;
<Style Selector="lib|BarButtonItem.ImageButtonStyle">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Width" Value="16" />
<Setter Property="Height" Value="16" />
<Setter Property="Template">
<ControlTemplate>
<Grid>
<Border Name="Border"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}" />
<Image Source="{TemplateBinding ImageSource}"
ToolTip.Tip="{TemplateBinding Tip}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}" />
</Grid>
</ControlTemplate>
</Setter>
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Width" Duration="0:0:0.2" />
<DoubleTransition Property="Height" Duration="0:0:0.2"/>
</Transitions>
</Setter>
</Style>
<Style Selector="lib|BarButtonItem.ImageButtonStyle:pointerover">
<Setter Property="Width" Value="20" />
<Setter Property="Height" Value="20" />
</Style>
I set width to 20, height to 20, it`s width or height not change when mouse in BarButtonItem
I have a Entry with a Style from StaticRecourse , but is it possible to have 2 different Styles for iOS and Android
<Entry
x:Name="Partijladen"
Grid.Row="15"
Grid.Column="4"
Grid.ColumnSpan="2"
Keyboard="Numeric"
Style="{StaticResource AEntry}"
TextChanged="Partijladen_TextChanged" />
This is working but i want a different Style for Android lets say "BEntry". What do i change here of is it not possible
Style="{StaticResource AEntry}"
And in App.xaml
<Style x:Key="AEntry" TargetType="Entry">
<Setter Property="TextColor" Value="#2c2c2e" />
<Setter Property="WidthRequest" Value="80" />
<Setter Property="HeightRequest" Value="10" />
<Setter Property="IsReadOnly" Value="True" />
<Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>
<Style x:Key="BEntry" TargetType="Entry">
<Setter Property="TextColor" Value="DarkGreen" />
<Setter Property="FontSize" Value="25" />
<Setter Property="WidthRequest" Value="80" />
<Setter Property="HeightRequest" Value="10" />
<Setter Property="IsReadOnly" Value="True" />
<Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>
Tryed this but error
When you have two different syles:
<Entry
...
Style="{x:OnPlatform Android={StaticResource AEntry},
iOS={StaticResource BEntry}}" />
Alternatively, you can set platform-specific style attributes in the same style.
<Style x:Key="AEntry" TargetType="Entry">
<Setter Property="FontSize" Value="{x:OnPlatform UWP='', iOS='22', Android='20'}" />
...
</Style>
Don't ask me why, but I thought only <ContentPage> can have <ContentPage.Resources>.
So I had a bunch of color setters and what not in almost every XAML page like this:
<ContentPage.Resources>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="#000" />
<Setter Property="BarTextColor" Value="#20b8a2" />
</Style>
<Style TargetType="ContentPage">
<Setter Property="BackgroundColor" Value="#231f20" />
</Style>
<Style TargetType="Label">
<Setter Property="TextColor" Value="#f7f7f7" />
</Style>
<Style TargetType="Entry">
<Setter Property="TextColor" Value="#f7f7f7" />
</Style>
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="#0089c1" />
<Setter Property="TextColor" Value="#f7f7f7" />
<Setter Property="CornerRadius" Value="0" />
</Style>
</ContentPage.Resources>
So how to change all main colors in one place?
So instead of having resources in every Solution/App/Views/SubPage.xaml file there is obviously an outermost XAML file in general projects root Solution/App/App.xaml where you can simply set these resources for entire application.
<Application ...>
<Application.Resources>
<Color x:Key="PrimaryColor">#20b8a2</Color> <!-- turqoise -->
<Color x:Key="SecondaryColor">#0089c1</Color> <!-- blue -->
<Color x:Key="TertiaryColor">#ef569f</Color> <!-- pink -->
<Color x:Key="ThemeExtremeColor">#000000</Color>
<Color x:Key="ThemeMainColor">#231f20</Color>
<Color x:Key="ThemeLighterColor">#333333</Color>
<Color x:Key="TextColor">#f7f7f7</Color>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="{StaticResource ThemeExtremeColor}" />
<Setter Property="BarTextColor" Value="{StaticResource PrimaryColor}" />
</Style>
<Style TargetType="ContentPage">
<Setter Property="BackgroundColor" Value="{StaticResource ThemeMainColor}" />
</Style>
<Style TargetType="Grid">
<Setter Property="BackgroundColor" Value="{StaticResource ThemeMainColor}" />
</Style>
<!--<Style TargetType="ListView">
<Setter Property="BackgroundColor" Value="{StaticResource ThemeMainColor}" />
</Style>-->
<Style TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource TextColor}" />
</Style>
<Style TargetType="Entry">
<Setter Property="TextColor" Value="{StaticResource TextColor}" />
</Style>
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="{StaticResource SecondaryColor}" />
<Setter Property="TextColor" Value="{StaticResource TextColor}" />
<Setter Property="CornerRadius" Value="0" />
</Style>
</Application.Resources>
....
</Application>
Now "{StaticResource TextColor}" can be used anywhere in XAML.
I recently downloaded Wox, an alternative search for Windows. Its search automatically appears as a dropdown menu. There is no way in the settings to change this to "dropup" rather than dropdown. I couldn't find this question asked anywhere, but the maker said in response to a question about a different change to appearance to edit the base theme document. I looked through the document, and couldn't find anywhere that seemed like an obvious place to toggle if the dropbox falls up or down, but I also only have very basic coding knowledge. I tried to search for how to do this online, but couldn't seem to find anything. The markup document is below. Is there anything I can change in this to cause it to drop up instead?
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:system="clr-namespace:System;assembly=mscorlib">
<Style x:Key="BaseQueryBoxStyle" TargetType="{x:Type TextBox}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="FontSize" Value="28" />
<Setter Property="FontFamily" Value="Segoe UI, Microsoft YaHei" />
<Setter Property="FontWeight" Value="Medium" />
<Setter Property="Height" Value="30" />
<Setter Property="Background" Value="#616161" />
<Setter Property="Foreground" Value="#E3E0E3" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Stylus.IsFlicksEnabled" Value="False" />
</Style>
<Style x:Key="BaseWindowBorderStyle" TargetType="{x:Type Border}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="CornerRadius" Value="0" />
<Setter Property="Background" Value="#424242"></Setter>
<Setter Property="Padding" Value="4 4 4 4" />
</Style>
<Style x:Key="BaseWindowStyle" TargetType="{x:Type Window}">
<Setter Property="Width" Value="350" />
<Setter Property="MaxWidth" Value="800" />
</Style>
<Style x:Key="BasePendingLineStyle" TargetType="{x:Type Line}">
<Setter Property="Stroke" Value="Blue" />
</Style>
<!-- Item Style -->
<Style x:Key="BaseItemTitleStyle" TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="#FFFFF8" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="Medium" />
<Setter Property="FontFamily" Value="Segoe UI, Microsoft YaHei" />
</Style>
<Style x:Key="BaseItemSubTitleStyle" TargetType="{x:Type TextBlock}" >
<Setter Property="Foreground" Value="#D9D9D4" />
<Setter Property="FontFamily" Value="Segoe UI, Microsoft YaHei" />
</Style>
<Style x:Key="BaseItemNumberStyle" TargetType="{x:Type TextBlock}">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Margin" Value="3 0 0 0" />
<Setter Property="FontSize" Value="22" />
</Style>
<Style x:Key="BaseItemTitleSelectedStyle" TargetType="{x:Type TextBlock}" >
<Setter Property="Foreground" Value="#FFFFF8" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="Medium" />
</Style>
<Style x:Key="BaseItemSubTitleSelectedStyle" TargetType="{x:Type TextBlock}" >
<Setter Property="Foreground" Value="#D9D9D4" />
</Style>
<Style x:Key="BaseListboxStyle" TargetType="{x:Type ListBox}">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer Focusable="false" Template="{DynamicResource ScrollViewerControlTemplate}">
<VirtualizingStackPanel IsItemsHost="True" />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ScrollViewer Style -->
<ControlTemplate x:Key="ScrollViewerControlTemplate" TargetType="{x:Type ScrollViewer}">
<Grid x:Name="Grid" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!--content in the left of ScrollViewer, just default-->
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
CanContentScroll="{TemplateBinding CanContentScroll}"
CanHorizontallyScroll="False"
CanVerticallyScroll="False"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Grid.Column="0"
Margin="{TemplateBinding Padding}"
Grid.Row="0" />
<!--Scrollbar in thr rigth of ScrollViewer-->
<ScrollBar x:Name="PART_VerticalScrollBar"
AutomationProperties.AutomationId="VerticalScrollBar"
Cursor="Arrow"
Grid.Column="1"
Margin="3 0 0 0"
Maximum="{TemplateBinding ScrollableHeight}"
Minimum="0"
Grid.Row="0"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
ViewportSize="{TemplateBinding ViewportHeight}"
Style="{DynamicResource ScrollBarStyle}" />
</Grid>
</ControlTemplate>
<!-- button style in the middle of the scrollbar -->
<Style x:Key="BaseThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border CornerRadius="2" DockPanel.Dock="Right" Background="#616161" BorderBrush="Transparent" BorderThickness="0" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="BaseScrollBarStyle" TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false" />
<Setter Property="Stylus.IsFlicksEnabled" Value="false" />
<!-- must set min width -->
<Setter Property="MinWidth" Value="0"/>
<Setter Property="Width" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<DockPanel>
<Track x:Name="PART_Track" IsDirectionReversed="true" DockPanel.Dock="Right">
<Track.Thumb>
<Thumb Style="{DynamicResource ThumbStyle}"/>
</Track.Thumb>
</Track>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Here is an MSDN example for changing ComboBox's ControlTemplate: https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/combobox-styles-and-templates
The interesting part is Popup:
<Popup x:Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
Changing Placement to Top should help.
In silverlight the context menu used to have a property IsZoomEnabled that use to define whether zoom out effect will be there when ContextMenu shows up but in winrt xaml we have MenuFlyout which does not have any such property. How should I disable this effect?
Here is the default template for MenuFlyout
<!-- Default style for Windows.UI.Xaml.Controls.MenuFlyoutPresenter -->
<Style TargetType="MenuFlyoutPresenter">
<Setter Property="RequestedTheme" Value="Light" />
<Setter Property="Background" Value="{ThemeResource FlyoutBackgroundThemeBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource FlyoutBorderThemeBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource FlyoutBorderThemeThickness}" />
<Setter Property="Padding" Value="{ThemeResource MenuFlyoutPresenterThemePadding}" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
<Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
<Setter Property="MaxWidth" Value="{ThemeResource FlyoutThemeMaxWidth}" />
<Setter Property="MinHeight" Value="{ThemeResource FlyoutThemeMinHeight}" />
<Setter Property="MaxHeight" Value="{ThemeResource FlyoutThemeMaxHeight}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuFlyoutPresenter">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer Padding="{TemplateBinding Padding}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
AutomationProperties.AccessibilityView="Raw">
<ItemsPresenter />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can't accomplish this in WinRT. You can create your own UserControl or replicate the behavior of a MenuFlyout using only a Flyout. Try this tutorial if you want to do something like this.