зеркало из https://github.com/telerik/uwp-docs.git
Merge pull request #94 from telerik/kerpecheva/add-shadow-docs
Fixed snippets and links
This commit is contained in:
Yana Kerpecheva
GitHub
Коммит
59ded5c5b7
|
|
@ -16,89 +16,75 @@ When a user needs to define custom sets of colors, they can take advantage of Cu
|
|||
|
||||
Create a static class to define a custom palette instance.
|
||||
|
||||
{{region CustomPalette}}
|
||||
public class CustomPalettes
|
||||
{
|
||||
static CustomPalettes()
|
||||
{
|
||||
CreateCustomDarkPalette();
|
||||
}
|
||||
|
||||
private static void CreateCustomDarkPalette()
|
||||
{
|
||||
ChartPalette palette = new ChartPalette() { Name = "CustomDark" };
|
||||
|
||||
// fill
|
||||
palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 40, 152, 228)));
|
||||
palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 205, 0)));
|
||||
palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 60, 0)));
|
||||
palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 210, 202, 202)));
|
||||
palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 67, 67, 67)));
|
||||
palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 255, 156)));
|
||||
palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 109, 49, 255)));
|
||||
palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 178, 161)));
|
||||
palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 109, 255, 0)));
|
||||
palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 128, 0)));
|
||||
|
||||
// stroke
|
||||
palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 96, 194, 255)));
|
||||
palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 225, 122)));
|
||||
palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 108, 79)));
|
||||
palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 229, 229, 229)));
|
||||
palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 84, 84, 84)));
|
||||
palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 255, 156)));
|
||||
palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 130, 79, 255)));
|
||||
palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 69, 204, 191)));
|
||||
palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 185, 255, 133)));
|
||||
palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 175, 94)));
|
||||
|
||||
CustomDark = palette;
|
||||
}
|
||||
|
||||
public static ChartPalette CustomDark { get; private set; }
|
||||
|
||||
}
|
||||
{{endregion}}
|
||||
public class CustomPalettes
|
||||
{
|
||||
static CustomPalettes()
|
||||
{
|
||||
CreateCustomDarkPalette();
|
||||
}
|
||||
|
||||
private static void CreateCustomDarkPalette()
|
||||
{
|
||||
ChartPalette palette = new ChartPalette() { Name = "CustomDark" };
|
||||
|
||||
// fill
|
||||
palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 40, 152, 228)));
|
||||
palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 205, 0)));
|
||||
palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 60, 0)));
|
||||
palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 210, 202, 202)));
|
||||
palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 67, 67, 67)));
|
||||
palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 255, 156)));
|
||||
palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 109, 49, 255)));
|
||||
palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 178, 161)));
|
||||
palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 109, 255, 0)));
|
||||
palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 128, 0)));
|
||||
|
||||
// stroke
|
||||
palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 96, 194, 255)));
|
||||
palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 225, 122)));
|
||||
palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 108, 79)));
|
||||
palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 229, 229, 229)));
|
||||
palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 84, 84, 84)));
|
||||
palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 255, 156)));
|
||||
palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 130, 79, 255)));
|
||||
palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 69, 204, 191)));
|
||||
palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 185, 255, 133)));
|
||||
palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 175, 94)));
|
||||
|
||||
CustomDark = palette;
|
||||
}
|
||||
|
||||
public static ChartPalette CustomDark { get; private set; }
|
||||
|
||||
}
|
||||
|
||||
Set the chart palette to your custom defined one.
|
||||
|
||||
{{region CustomPalette}}
|
||||
this.chart.Palette = CustomPalettes.CustomDark;
|
||||
{{endregion}}
|
||||
this.chart.Palette = CustomPalettes.CustomDark;
|
||||
|
||||
Define a Palette in XAML
|
||||
|
||||
Define a custom palette instance in your resources.
|
||||
|
||||
{{region CustomPaletteResource}}
|
||||
<telerik:ChartPalette x:Key="CustomPalette">
|
||||
<telerik:ChartPalette.FillEntries>
|
||||
<telerik:PaletteEntryCollection>
|
||||
<SolidColorBrush Color="Green"></SolidColorBrush>
|
||||
<SolidColorBrush Color="Gray"></SolidColorBrush>
|
||||
<SolidColorBrush Color="Blue"></SolidColorBrush>
|
||||
<SolidColorBrush Color="Red"></SolidColorBrush>
|
||||
</telerik:PaletteEntryCollection>
|
||||
</telerik:ChartPalette.FillEntries>
|
||||
<telerik:ChartPalette.StrokeEntries>
|
||||
<telerik:PaletteEntryCollection>
|
||||
<SolidColorBrush Color="LightGreen"></SolidColorBrush>
|
||||
<SolidColorBrush Color="LightGray"></SolidColorBrush>
|
||||
<SolidColorBrush Color="LightBlue"></SolidColorBrush>
|
||||
<SolidColorBrush Color="OrangeRed"></SolidColorBrush>
|
||||
</telerik:PaletteEntryCollection>
|
||||
</telerik:ChartPalette.StrokeEntries>
|
||||
</telerik:ChartPalette>
|
||||
{{endregion}}
|
||||
|
||||
|
||||
<telerik:ChartPalette x:Key="CustomPalette">
|
||||
<telerik:ChartPalette.FillEntries>
|
||||
<telerik:PaletteEntryCollection>
|
||||
<SolidColorBrush Color="Green"></SolidColorBrush>
|
||||
<SolidColorBrush Color="Gray"></SolidColorBrush>
|
||||
<SolidColorBrush Color="Blue"></SolidColorBrush>
|
||||
<SolidColorBrush Color="Red"></SolidColorBrush>
|
||||
</telerik:PaletteEntryCollection>
|
||||
</telerik:ChartPalette.FillEntries>
|
||||
<telerik:ChartPalette.StrokeEntries>
|
||||
<telerik:PaletteEntryCollection>
|
||||
<SolidColorBrush Color="LightGreen"></SolidColorBrush>
|
||||
<SolidColorBrush Color="LightGray"></SolidColorBrush>
|
||||
<SolidColorBrush Color="LightBlue"></SolidColorBrush>
|
||||
<SolidColorBrush Color="OrangeRed"></SolidColorBrush>
|
||||
</telerik:PaletteEntryCollection>
|
||||
</telerik:ChartPalette.StrokeEntries>
|
||||
</telerik:ChartPalette>
|
||||
|
||||
Set the chart palette to your custom defined one.
|
||||
|
||||
{{region CustomPaletteReference}}
|
||||
<telerik:RadCartesianChart x:Name="chart" Palette="{StaticResource CustomPalette}"/>
|
||||
{{endregion}}
|
||||
|
||||
|
||||
<telerik:RadCartesianChart x:Name="chart" Palette="{StaticResource CustomPalette}"/>
|
||||
|
|
|
|||
|
|
@ -21,87 +21,71 @@ The following example demonstrates how to create a RadCartesianChart with horizo
|
|||
|
||||
Create a bar chart with swapped axes.
|
||||
|
||||
{{region HorizontalBarChart}}
|
||||
<telerik:RadCartesianChart>
|
||||
<telerik:RadCartesianChart.HorizontalAxis>
|
||||
<telerik:LinearAxis/>
|
||||
</telerik:RadCartesianChart.HorizontalAxis>
|
||||
<telerik:RadCartesianChart.VerticalAxis>
|
||||
<telerik:CategoricalAxis/>
|
||||
</telerik:RadCartesianChart.VerticalAxis>
|
||||
<telerik:BarSeries CombineMode="Cluster" ItemsSource="{Binding Data1}">
|
||||
<telerik:BarSeries.ValueBinding>
|
||||
<telerik:PropertyNameDataPointBinding PropertyName="Value"/>
|
||||
</telerik:BarSeries.ValueBinding>
|
||||
<telerik:BarSeries.CategoryBinding>
|
||||
<telerik:PropertyNameDataPointBinding PropertyName="Category"/>
|
||||
</telerik:BarSeries.CategoryBinding>
|
||||
</telerik:BarSeries>
|
||||
<telerik:BarSeries CombineMode="Cluster" ItemsSource="{Binding Data2}">
|
||||
<telerik:BarSeries.ValueBinding>
|
||||
<telerik:PropertyNameDataPointBinding PropertyName="Value"/>
|
||||
</telerik:BarSeries.ValueBinding>
|
||||
<telerik:BarSeries.CategoryBinding>
|
||||
<telerik:PropertyNameDataPointBinding PropertyName="Category"/>
|
||||
</telerik:BarSeries.CategoryBinding>
|
||||
</telerik:BarSeries>
|
||||
</telerik:RadCartesianChart>
|
||||
{{endregion}}
|
||||
|
||||
|
||||
<telerik:RadCartesianChart>
|
||||
<telerik:RadCartesianChart.HorizontalAxis>
|
||||
<telerik:LinearAxis/>
|
||||
</telerik:RadCartesianChart.HorizontalAxis>
|
||||
<telerik:RadCartesianChart.VerticalAxis>
|
||||
<telerik:CategoricalAxis/>
|
||||
</telerik:RadCartesianChart.VerticalAxis>
|
||||
<telerik:BarSeries CombineMode="Cluster" ItemsSource="{Binding Data1}">
|
||||
<telerik:BarSeries.ValueBinding>
|
||||
<telerik:PropertyNameDataPointBinding PropertyName="Value"/>
|
||||
</telerik:BarSeries.ValueBinding>
|
||||
<telerik:BarSeries.CategoryBinding>
|
||||
<telerik:PropertyNameDataPointBinding PropertyName="Category"/>
|
||||
</telerik:BarSeries.CategoryBinding>
|
||||
</telerik:BarSeries>
|
||||
<telerik:BarSeries CombineMode="Cluster" ItemsSource="{Binding Data2}">
|
||||
<telerik:BarSeries.ValueBinding>
|
||||
<telerik:PropertyNameDataPointBinding PropertyName="Value"/>
|
||||
</telerik:BarSeries.ValueBinding>
|
||||
<telerik:BarSeries.CategoryBinding>
|
||||
<telerik:PropertyNameDataPointBinding PropertyName="Category"/>
|
||||
</telerik:BarSeries.CategoryBinding>
|
||||
</telerik:BarSeries>
|
||||
</telerik:RadCartesianChart>
|
||||
|
||||
Create a sample class for data:
|
||||
|
||||
{{region SampleData}}
|
||||
public class SampleData
|
||||
{
|
||||
public double Value { get; set; }
|
||||
public string Category { get; set; }
|
||||
}
|
||||
{{endregion}}
|
||||
|
||||
|
||||
public class SampleData
|
||||
{
|
||||
public double Value { get; set; }
|
||||
public string Category { get; set; }
|
||||
}
|
||||
|
||||
Create the view model:
|
||||
|
||||
{{region SampleViewModel}}
|
||||
public class SampleViewModel
|
||||
{
|
||||
private Random r = new Random();
|
||||
|
||||
public IEnumerable Data1 { get; private set; }
|
||||
public IEnumerable Data2 { get; private set; }
|
||||
|
||||
|
||||
public SampleViewModel()
|
||||
{
|
||||
this.Data1 = (from c in Enumerable.Range(0, 10)
|
||||
select new SampleData
|
||||
{
|
||||
Category = "Category " + c,
|
||||
Value = r.Next(10, 100)
|
||||
}).ToList();
|
||||
|
||||
this.Data2 = (from c in Enumerable.Range(0, 10)
|
||||
select new SampleData
|
||||
{
|
||||
Category = "Category " + c,
|
||||
Value = r.Next(10, 100)
|
||||
}).ToList();
|
||||
}
|
||||
}
|
||||
|
||||
{{endregion}}
|
||||
public class SampleViewModel
|
||||
{
|
||||
private Random r = new Random();
|
||||
|
||||
public IEnumerable Data1 { get; private set; }
|
||||
public IEnumerable Data2 { get; private set; }
|
||||
|
||||
|
||||
public SampleViewModel()
|
||||
{
|
||||
this.Data1 = (from c in Enumerable.Range(0, 10)
|
||||
select new SampleData
|
||||
{
|
||||
Category = "Category " + c,
|
||||
Value = r.Next(10, 100)
|
||||
}).ToList();
|
||||
|
||||
this.Data2 = (from c in Enumerable.Range(0, 10)
|
||||
select new SampleData
|
||||
{
|
||||
Category = "Category " + c,
|
||||
Value = r.Next(10, 100)
|
||||
}).ToList();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Set the chart data context.
|
||||
|
||||
{{region SetDataContext}}
|
||||
protected override void OnNavigatedTo(NavigationEventArgs e)
|
||||
{
|
||||
this.DataContext = new SampleViewModel();
|
||||
}
|
||||
{{endregion}}
|
||||
|
||||
|
||||
protected override void OnNavigatedTo(NavigationEventArgs e)
|
||||
{
|
||||
this.DataContext = new SampleViewModel();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -85,8 +85,6 @@ Next, create sample data and set it to the DataContext of our DataGrid:
|
|||
|
||||
*DataClass* is a custom class defining our objects:
|
||||
|
||||
|
||||
{{region DataClass}}
|
||||
public class DataClass
|
||||
{
|
||||
public string City { get; set; }
|
||||
|
|
|
|||
|
|
@ -38,12 +38,7 @@ In order to style the Increase/Decrease button explicitly, you have to edit the
|
|||
|
||||
You can change every property you wish to custom value but remember that all of them should be present in the style. Then you have to set the Increase/DecreaseButtonStyle property of the RadNumericBox to the custom style as shown in the example below.
|
||||
|
||||
|
||||
{{region NumericButtonSetStyle}}
|
||||
<telerik:RadNumericBox DecreaseButtonStyle="{StaticResource CustomButtonStyle}" />
|
||||
{{endregion}}
|
||||
|
||||
|
||||
|
||||
## Styling the Header
|
||||
|
||||
|
|
|
|||
|
|
@ -27,4 +27,4 @@ Shadows are commonly used to create depth in the interface and help users differ
|
|||
|
||||
## See Also
|
||||
|
||||
- [Getting Started]({%slug shadow-getting-started %})
|
||||
- [Getting Started]({%slug shadow-gettingstarted%})
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче