I have a Silverlight application that is using a ItemsControl. Inside of that ItemsControl I have a DataTemplate that is defined like the following:
XAML
<ItemsControl Grid.Row="1" Grid.ColumnSpan="5" x:Name="dgOdds">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="gRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="OF1" Grid.Column="0" Text="{Binding OddFactor, Mode=TwoWay}" FontWeight="Bold" VerticalAlignment="Center" HorizontalContentAlignment="Center"/>
<TextBox x:Name="OFX" Grid.Column="1" Text="{Binding OddFactor, Mode=TwoWay}" FontWeight="Bold" VerticalAlignment="Center" HorizontalContentAlignment="Center"/>
<TextBox x:Name="OF2" Grid.Column="2" Text="{Binding OddFactor, Mode=TwoWay}" FontWeight="Bold" VerticalAlignment="Center" HorizontalContentAlignment="Center"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I have a list of objects:
C#
ObservableCollection<TestObj> SomeList = new ObservableCollection<TestObj>;
SomeList.Add(new TestObj(){ OddType = 1, OddFakctor = 1.1 });
SomeList.Add(new TestObj(){ OddType = 2, OddFakctor = 2.2 });
SomeList.Add(new TestObj(){ OddType = 3, OddFakctor = 3.3 });
this.dgOdds.ItemsSource = this.Collection;
The TestObj class is as follows:
public class TestObj
{
public double OddType { get; set;}
public double OddFakctor { get; set; }
}
I want to display the properties in my controls something like:
If OddType equal 1, than show in TextBox x:Name="OF1",
if OddType equal 2, than show in TextBox x:Name="OFX",
if OddType equal 3, than show in TextBox x:Name="OF3"
How to do this?
since u want to show the OddType equals to 1 or 2 or 3, u can have only a single textblock.
As if 1 is selected, then one of the TextBox would have OF1 and others will be null.
private double _oddfactor;
public double OddFakctor
{
get
{
return _oddfactor;
}
set
{
_oddfactor = value;
OnPropertyChanged(() => OddFakctor);
}
}
if here u update the _OddFakctor , it will bind the text box with the value wat u r passing to that _oddfactor
Related
I have task to create in C# UWP user created check-list.
But I have stuck from the beginning cause XAML is new for me, so I have no idea what to start from.
So, I have textbox to enter title, task or subtask to in listbox (priviously added to) selected task.
this is my xaml how it looks like now:
<Page
x:Class="Table1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Table1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<TextBox x:Name="txt" HorizontalAlignment="Left" Height="71" Margin="71,247,0,0" Text="TextBox" VerticalAlignment="Top" Width="395"/>
<RadioButton x:Name="title" Content="Add Title" HorizontalAlignment="Left" Margin="71,86,0,0" VerticalAlignment="Top"/>
<RadioButton x:Name="task" Content="Add Task" HorizontalAlignment="Left" Margin="71,123,0,0" VerticalAlignment="Top"/>
<RadioButton x:Name="subtask" Content="Add Subtask" HorizontalAlignment="Left" Margin="71,155,0,0" VerticalAlignment="Top"/>
<ListBox x:Name="listbox" HorizontalAlignment="Left" Height="68" Margin="71,354,0,0" VerticalAlignment="Top" Width="395"/>
<Button x:Name="btn" Content="Button" HorizontalAlignment="Left" Margin="401,483,0,0" VerticalAlignment="Top" Click="btn_Click"/>
</Grid>
</Page>
There are the code:
public class subtasks
{
public string parent { get; set; }
public string subtask { get; set; }
public subtasks(string parenti, string subtaski)
{
parent = parenti;
subtask = subtaski;
}
public void setsub(string parenti, string sub)
{
parent = parenti;
subtask = sub;
}
}
List<string> Tasks = new List<string>();
List<subtasks> sub = new List<subtasks>();
private void btn_Click(object sender, RoutedEventArgs e)
{
string parent = "";
string Title;
string Task;
string Subtask;
if (title.IsChecked==true)
{
Title = txt.Text;
adding(Title, parent, 1);
}
else if (task.IsChecked==true)
{
Task = txt.Text;
adding(Task, parent, 2);
}
else if (subtask.IsChecked==true)
{
parent = listbox.SelectedItem.ToString();
Subtask = txt.Text;
adding(Subtask, parent, 3);
}
else
{
}
}
private void adding(string str, string par, int x)
{
subtasks subi = new subtasks(par,str);
RowDefinition row = new RowDefinition();
TextBlock text = new TextBlock();
if (x==1)
{
print(str);
}
else if (x==2)
{
Tasks.Add(str);
listbox.Items.Add(str);
text.Text = str;
print(str);
}
else
{
sub.Add(subi);
print(str);
}
}
private void print(string title)
{
int step = 0;
Grid gridwin = new Grid();
gridwin.Children.Clear();
RowDefinition row = new RowDefinition();
TextBlock text = new TextBlock();
text.Text = title;
Grid.SetColumn(text, 0);
Grid.SetRow(text, step);
step++;
for (int i = 0; i < Tasks.Count; i++)
{
text.Text = Tasks[i].ToString();
gridwin.Children.Add(text);
Grid.SetColumn(text, 0);
Grid.SetRow(text, step);
step++;
for (int k = 0; k < sub.Count; k++)
{
if (sub[k].parent == Tasks[i])
{
text.Text = sub[k].subtask.ToString();
gridwin.Children.Add(text);
Grid.SetColumn(text, 0);
Grid.SetRow(text, step);
step++;
}
}
}
}
As you see I need to clear and put data every time the button is clicked, cause you never know when user will decide to add new subtask for previously added task. So, the question is, how to make the table with column1 with tasks and subtasks and column2 which is chekbox.
What you want to probably do is to create a DataTemplate. You use this to specify how list items should be displayed and formatted. This way you can specify you want to lay them out as a Grid with two columns like description and CheckBox. Take a look into the documentation to see some examples of DataTemplates. You can also see the Azure Mobile Apps quickstart for UWP, because although it is focused on demonstrating Microsoft Azure integration to UWP, it is actually a to-do app, which should give you some inspiration for building your own.
The layout could look like this:
<ListBox x:Name="listbox" HorizontalAlignment="Left" Height="68" Margin="71,354,0,0" VerticalAlignment="Top" Width="395">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Text}" />
<CheckBox Grid.Column="1" IsChecked="{Binding IsChecked, Mode=TwoWay}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You can see my code is also using {Binding} syntax, which you will also need to learn a bit about to be able to know when the user has checked a to-do item in the list. I suggest you to take a look at a simple tutorial sample like here. In fact, data-binding is one of the most important things when building XAML-based apps and when you get to understand this concept, it will help you a lot on the way to becoming a UWP ninja :-) .
Why dont use the UWP DataGrid with CheckBox?
XAML
<toolkit:DataGrid Grid.Column="0" ItemsSource="{x:Bind myItemsToBind}"
x:Name="dgwDeviceSPNs" MinWidth="100"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible"
AlternatingRowBackground="Transparent"
AreRowDetailsFrozen="False"
AreRowGroupHeadersFrozen="True"
AutoGenerateColumns="False"
CanUserSortColumns="False"
CanUserReorderColumns="True"
RowGroupHeaderPropertyNameAlternative=""
CanUserResizeColumns="True"
MaxColumnWidth="200"
FrozenColumnCount="0"
GridLinesVisibility="Horizontal"
HeadersVisibility="None"
IsReadOnly="True"
RowDetailsVisibilityMode="Collapsed"
SelectionMode="Single">
<toolkit:DataGrid.Columns>
<toolkit:DataGridTemplateColumn MinWidth="10">
<toolkit:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Padding="2">
<CheckBox ToolTipService.ToolTip="{Binding Name}" IsChecked="{Binding IsSelected, Mode=TwoWay}" Content="{Binding Name}"></CheckBox>
</StackPanel>
</DataTemplate>
</toolkit:DataGridTemplateColumn.CellTemplate>
</toolkit:DataGridTemplateColumn>
</toolkit:DataGrid.Columns>
</toolkit:DataGrid>
How to display array in xaml the way that each line is on separate row and each row is split into separate textblocks?
I split line like so:
string[] splitLines = line.Split(';');
itemsControl.Items.Add(line);
Then, in xaml I display it like so:
<ItemsControl x:Name="itemsControl"
ItemsSource="{Binding itemsControl}"
FontSize="24">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Width="Auto"
Margin="0 12"
HorizontalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Column="0"
Grid.Row="0"
Orientation="Horizontal">
<TextBlock Name="txtblk0" Text="{Binding }" />
</StackPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
This way I get each line from my .xls file in separate row, but the separator ';' is included in the returned content of row.
Now I would like to remove ';' separator and put each word from each line on separate textblock, like so:
for (int index = 0; index < splitLines.Length; index++)
{
itemsControl.Items.Add(splitLines[index]);
}
This breaks each line into separate words, but unfortunately, each word is put on separate row(instead to populate 5 textblocks with each line's words.
Any idea how to show each .xls line in separate row, but then also split each line into words and put them in separate textblocks in separate columns?
EDIT
I have tried the solution from Alexej Sommer, I get some erors though:
ItemsData dataitem = new ItemsData
{
value0 = splitLines[0];
value1 = splitLines[1];
value2 = splitLines[2];
value3 = splitLines[3];
value4 = splitLines[4];
}
items.Add(dataitem);
In this piece of code I get first semicolon underscored and error says:
} expected.
Then, values 1 - 4 are underscored and error says:
The name (X) does not exist in the current content
At last, dataitem gets underscored and same error shows up.
EDIT 2 --
I managed to fix the problem. There were problems with braces and code put in a wrong place. Also, instead of:
ItemsData dataitem = new ItemsData
{
value0 = splitLines[0];
value1 = splitLines[1];
value2 = splitLines[2];
value3 = splitLines[3];
value4 = splitLines[4];
}
items.Add(dataitem);
I used:
ItemsData dataitem = new ItemsData
{
value0 = splitLines[0],
value1 = splitLines[1],
value2 = splitLines[2],
value3 = splitLines[3],
value4 = splitLines[4],
};
items.Add(dataitem);
And that solved the problem.
Here is clean working code:
public async void ReadFile()
{
var path = #"CPU.xls";
var folder = Windows.ApplicationModel.Package.Current.InstalledLocation;
var file = await folder.GetFileAsync(path);
var readFile = await Windows.Storage.FileIO.ReadLinesAsync(file);
foreach (string line in readFile.OrderBy(line =>
{
int lineNo;
var success = int.TryParse(line.Split(';')[4], out lineNo);
if (success) return lineNo;
return int.MaxValue;
}))
{
string[] splitLines = line.Split(';');
ObservableCollection<ItemsData> items = new ObservableCollection<ItemsData>();
for (int index = 0; index < splitLines.Length; index++)
{
ItemsData dataitem = new ItemsData
{
value0 = splitLines[0],
value1 = splitLines[1],
value2 = splitLines[2],
value3 = splitLines[3],
value4 = splitLines[4],
};
items.Add(dataitem);
}
itemsControl.DataContext = items;
}
}
I yet need to fix the layout as for now all the textblocks show up in same column and they overlap.
Thank you Alexej for your help!
Edit 3----
To put textblocks on separate columns in xaml I did like so:
<ScrollViewer>
<ItemsControl x:Name="itemsControl"
ItemsSource="{Binding}"
FontSize="24">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Width="Auto"
Margin="0 12"
HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Column="0"
Grid.Row="0"
Orientation="Horizontal">
<TextBlock Name="txtblk0" Text="{Binding value0}" />
</StackPanel>
<StackPanel Grid.Column="1"
Grid.Row="0"
Orientation="Horizontal">
<TextBlock Name="txtblk1" Text="{Binding value1}" />
</StackPanel>
<StackPanel Grid.Column="2"
Grid.Row="0"
Orientation="Horizontal">
<TextBlock Name="txtblk2" Text="{Binding value2}" />
</StackPanel>
<StackPanel Grid.Column="3"
Grid.Row="0"
Orientation="Horizontal">
<TextBlock Name="txtblk3" Text="{Binding value3}" />
</StackPanel>
<StackPanel Grid.Column="4"
Grid.Row="0"
Orientation="Horizontal">
<TextBlock Name="txtblk4" Text="{Binding value4}" />
</StackPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
This way each word from line is put on separate column. TextBlocks don't overlap anymore.
Unfortunately I didn't manage do showcase all file(all lines). For now each row in xaml is populated with same line from the file instead of pulling each line into separate rows in xaml.
What should I do in order to list all lines instead of just one line?
I believe that there is problem on C# code side.
First create class for data:
public class itemsdata
{
public string txt0 { get; set; }
public string txt1 { get; set; }
public string txt2 { get; set; }
public string txt3 { get; set; }
public string txt4 { get; set; }
}
after it, create collection
ObservableCollection<itemsdata> items = new ObservableCollection<itemsdata>();
and fill it:
for (int index = 0; index < splitLines.Length; index++)
{
itemsdata dataitem=new itemsdata
{
txt0=splitLines[0];
txt1=splitLines[1];
txt2=splitLines[2];
txt2=splitLines[3];
txt2=splitLines[4];
}
items.Add(dataitem);
}
itemsControl.DataContext = items;
change binging to
ItemsSource="{Binding}"
and add new fields to datatemplate
<TextBlock Name="txtblk0" Text="{Binding txt0}" />
<TextBlock Name="txtblk1" Text="{Binding txt1}" />
<TextBlock Name="txtblk2" Text="{Binding txt2}" />
<TextBlock Name="txtblk3" Text="{Binding txt3}" />
<TextBlock Name="txtblk4" Text="{Binding txt4}" />
I am trying to fill a ListBox with items consisting of a grid which holds a checkbox and a textblock. I originally had only a checkbox but I need the text to wrap so I changed it to a grid with a checkbox and a textblock, with the text block doing the text wrapping.
When it was just the the checkbox, the binding worked, but now it does not. Now the correct number of items show up in the listbox but it is just an unchecked checkbox (even if I set it to checked in the code behind, see below) and a blank textblock.
XAML:
<ListBox
x:Name="lstCalibration"
Margin="304,95,78,24"
Background="#7FFFFFFF"
Width="211"
HorizontalAlignment="Center"
VerticalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="auto">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CheckBox
Content=""
Tag="{Binding Tag}"
IsChecked="{Binding IsChecked}"
Checked="CheckBoxCal_Checked"
Unchecked="CheckBoxCal_Unchecked"
Grid.Row="0" Grid.Column="0"
/>
<TextBlock
Tag="{Binding Tag}"
Text="{Binding Text}"
TextWrapping="Wrap"
Grid.Row="0"
Grid.Column="1"
/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Code behind:
foreach (Controller item in calList)
{
//fill listbox with cals and correct checked states
Grid grid = new Grid();
CheckBox cb = new CheckBox();
TextBlock tb = new TextBlock();
tb.Text = item.Description;
cb.Tag = tb.Tag = i;
cb.IsChecked = calChecked[i];
if (cb.IsChecked == true)
noneChecked = false;
i++;
Grid.SetRow(cb, 0);
Grid.SetColumn(cb, 0);
grid.Children.Add(cb);
Grid.SetRow(tb, 0);
Grid.SetColumn(tb, 1);
grid.Children.Add(tb);
lstCalibration.Items.Add(grid);
}
Add this, and delete that foreach loop where you programatically create all the stuff you already set up in your DataTemplate. It's a perfectly good DataTemplate, but your code isn't using it right. Get rid of calChecked; _items[n].IsChecked will now do that job.
At any time you can add a new ListItem to _items and it will appear in the list, or remove an existing one and it will vanish from the list. That's the "observable" part. Thanks to the PropertyChanged event raising, if you set IsChecked on any of these from code behind, the corresponding checkbox in the UI will automagically update.
public class ListItem : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public String Text { get; set; }
private bool _isChecked = false;
public bool IsChecked {
get { return _isChecked; }
set {
_isChecked = value;
PropertyChanged?.Invoke(this,
new PropertyChangedEventArgs(nameof(IsChecked));
}
}
}
In your constructor in code behind:
private ObservableCollection<ListItem> _items;
public MyWindow()
{
InitializeComponent()
_items = new ObservableCollection<ListItem>(
calList.Select(
cal => new ListItem {
Text = cal.Description,
IsChecked = cal.WhateverElse
}
));
lstCalibration.Items = _items;
}
One small change to DataTemplate in two places: Don't waste time binding Tag. In the event handlers (which you may not even need), just cast like so:
public void CheckBoxCal_Checked(object sender, EventArgs args)
{
var listItem = ((FrameworkElement)sender).DataContext as ListItem;
// Do whatever. listItem.IsChecked will be up to date thanks
// to the binding.
}
XAML:
<CheckBox
Content=""
IsChecked="{Binding IsChecked}"
Checked="CheckBoxCal_Checked"
Unchecked="CheckBoxCal_Unchecked"
Grid.Row="0" Grid.Column="0"
/>
<TextBlock
Text="{Binding Text}"
TextWrapping="Wrap"
Grid.Row="0"
Grid.Column="1"
/>
I am developing one Windows store application. I have implemented one listview. listview contains image , textblock and checkbox controls. my listview gets the data from internet i have done xml parsing with listview and binded data to listview. i want to get all the data from listview where checkboxes are checked in listview.
my xaml code is:
<ListView Name="display" ItemsSource="{Binding}" SelectionMode="Single"
SelectionChanged="display_SelectionChanged"
ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Visible"
ItemContainerStyle="{StaticResource ListViewItemStyle12}" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="stak2" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Source="{Binding Path=Image}" Width="450" Tapped="image_taped" />
<CheckBox Tag="{Binding Path=tag}" Visibility="{Binding Path=visichk}" Height="40" Name="addremove"
HorizontalAlignment="Center" Checked="add_checked" Unchecked="sub_checked" Opacity="0.5"
Background="White" VerticalAlignment="Top" Template="{StaticResource CheckboxImageTemplate}" >
</CheckBox>
<TextBlock Text="{Binding Image_code}" FontSize="25" Foreground="Gray" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
datasource for listview :
XDocument xmlDoc = XDocument.Parse(responseString);
var Categories = xmlDoc.Descendants("product").ToArray();
List<ProductData> displaylst = new List<ProductData>(); //ProductData is my Class.
foreach (var cat in Categories)
{
string prId = cat.Elements("id_products").Select(r => r.Value).FirstOrDefault();
List<string> Image = cat.Descendants("images").Elements("src").Attributes("largimage").Select(r => r.Value).ToList();
List<string> Image_code = cat.Descendants("images").Elements("src").Select(r => r.LastAttribute.Value).ToList();
int i = 0;
foreach (string img in Image)
{
displaylst.Add(new ProductData { Id = prId, Image = img, Image_code = Image_code[i] });
i++;
}
}
display.ItemsSource = displaylst;
Now on one button click i want to get the data of Product like prId,Image,Image_code where checkbox are checked from listview and put it into the simple list.
how can i did this please help me. thanks in advance.
First let's add a property to your ProductData class
public class ProductData
{
public string Id { get; set; }
public string Image { get; set; }
// I dont know exactly what's in this class
// ... more properties
// Add this one
public bool IsSelected { get; set; }
}
Now that we have a boolean IsSelected in our ProductData class we can know which are selected.
In the second foreach change this line
// Set IsSelected to false by default
displaylst.Add(new ProductData { IsSelected = false, Id = prId, Image = img, Image_code = Image_code[i] });
And bind the "IsChecked" property of your checkbox to IsSelected
<CheckBox IsChecked="{Binding Path=IsSelected}" Tag="{Binding Path=tag}" Visibility="{Binding Path=visichk}" Height="40" Name="addremove"
HorizontalAlignment="Center" Checked="add_checked" Unchecked="sub_checked" Opacity="0.5"
Background="White" VerticalAlignment="Top" Template="{StaticResource CheckboxImageTemplate}" >
With binding when you check one of the checkbox, the associed productData IsSelected property will become "true" automatically.
So now you just have to do a new list and select only ProductData where IsSelected is true:
List<ProductData> listOfSelectedProducts = (from product in displaylst
where product.IsSelected == true
select product).ToList();
Here you go you got a list of ProductData with only selected products.
I'm trying to use a Pie Chart from the SyncFusion WinRT Studio in my new Win8 C#/XAML store app, and I can't figure out how to set the data on the chart. I have the chart on my page and have tried everything I can find to set the data to make things show up, but I can't get it to work. The sample apps aren't much help because there is 0 code in their pages and I can't figure out what's different. The chart below is copied right from their sample, but it doesn't work in my app. Anyone have any samples of using a SyncFusion chart in a WinRT app?
Chart in XAML:
<Grid Margin="30,15,30,30" x:Name="ChartGrid">
<Grid.Resources>
<local:Labelconvertor x:Key="labelconverter"/>
<Style TargetType="Line" x:Key="lineStyle">
<Setter Property="StrokeThickness" Value="0"/>
</Style>
<DataTemplate x:Key="labelTemplate">
<TextBlock Margin="10,0,0,0" Text="{Binding Converter={StaticResource labelconverter}}" FontSize="26" FontFamily="Segoe UI" FontWeight="Light" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Top" Opacity="0.5"></TextBlock>
</DataTemplate>
<DataTemplate x:Key="legend">
<StackPanel Orientation="Horizontal">
<Grid Margin="10,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Width="15" Height="15" Fill="{Binding Interior}"></Rectangle>
<TextBlock Margin="10,5,5,0" Grid.Column="1" Text="{Binding Item.Expense}"></TextBlock>
</Grid>
</StackPanel>
</DataTemplate>
</Grid.Resources>
<Grid.DataContext>
<local:PieChartViewModel/>
</Grid.DataContext>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Margin="0,0,0,20">
</StackPanel>
<chart:Chart x:Name="ScatterChart" AreaBorderThickness="0" HorizontalAlignment="Center" Grid.RowSpan="2" Visibility="Visible">
<chart:Chart.Header>
<TextBlock FontSize="20" FontFamily="Segoe UI" Margin="0,20,0,10">Agriculture Expenses Comparison</TextBlock>
</chart:Chart.Header>
<chart:Chart.PrimaryAxis>
<chart:ChartAxis></chart:ChartAxis>
</chart:Chart.PrimaryAxis>
<chart:Chart.SecondaryAxis>
<chart:ChartAxis></chart:ChartAxis>
</chart:Chart.SecondaryAxis>
<chart:Chart.Legend>
<chart:ChartLegend CornerRadius="0" ItemTemplate="{StaticResource legend}" CheckBoxVisibility="Visible" BorderThickness="1">
</chart:ChartLegend>
</chart:Chart.Legend>
<chart:PieSeries ItemsSource="{Binding Expenditure}" XBindingPath="Expense" x:Name="pieSeries" ExplodeAll="{Binding Path=IsChecked,ElementName=chkExplode}" ExplodedRadius="{Binding Path=Value,ElementName=slRadius}" Palette="Metro" Label="Expenditures" YBindingPath="Amount">
<chart:PieSeries.AdornmentsInfo>
<chart:ChartAdornmentInfo AdornmentsPosition="Bottom" HorizontalAlignment="Center" VerticalAlignment="Center" ConnectorLineStyle="{StaticResource lineStyle}" ShowConnectorLine="True" ConnectorHeight="30" ShowLabel="True" LabelTemplate="{StaticResource labelTemplate}" SegmentLabelContent="YValue">
</chart:ChartAdornmentInfo>
</chart:PieSeries.AdornmentsInfo>
</chart:PieSeries>
</chart:Chart>
</Grid>
</StackPanel>
</Grid>
Code-Behind called from the LoadState function: (I've tried all of these options and none of them work...)
PieChartViewModel pvm = new PieChartViewModel();
this.DefaultViewModel["PieChartViewModel"] = pvm;
this.DefaultViewModel["DataContext"] = pvm;
this.DefaultViewModel["Items"] = pvm;
this.DefaultViewModel["DefaultViewModel"] = pvm;
this.ScatterChart.DataContext = pvm;
this.ChartGrid.DataContext = pvm;
Object Definition:
public class PieChartViewModel
{
public PieChartViewModel()
{
this.Expenditure = new List<CompanyExpense>();
Expenditure.Add(new CompanyExpense() { Expense = "Seeds", Amount = 20d });
Expenditure.Add(new CompanyExpense() { Expense = "Fertilizers", Amount = 23d });
Expenditure.Add(new CompanyExpense() { Expense = "Insurance", Amount = 12d });
Expenditure.Add(new CompanyExpense() { Expense = "Labor", Amount = 28d });
Expenditure.Add(new CompanyExpense() { Expense = "Warehousing", Amount = 10d });
Expenditure.Add(new CompanyExpense() { Expense = "Taxes", Amount = 10d });
Expenditure.Add(new CompanyExpense() { Expense = "Truck", Amount = 10d });
}
public IList<CompanyExpense> Expenditure
{
get;
set;
}
}
public class CompanyExpense
{
public string Expense { get; set; }
public double Amount { get; set; }
}
I was able to populate the pie chart using the same data without problem. Please find the sample at PieChartDemo
Here is the document that explains how to configure Pie Chart: PieChartHelp
Following are the three APIs used for providing data for generating PieSeries,
ItemsSource - You can provide the data source using this property. Any IEnumerable can be given as data source.
XBindingPath - It is used to provide the path for category data in the source object.
YBindingPath - It is used to provide the path for numeric data in the source object.