I have a Chart from Win RT Xaml Toolkit that I want to display a ColumnSeries like this:
<charting:Chart Name="columnChart" Grid.Row="1" Grid.Column="1" Width="400" Height="400">
<charting:Chart.Series>
<charting:ColumnSeries
ItemsSource="{Binding items}"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Value}"
IsSelectionEnabled="True">
</charting:ColumnSeries>
</charting:Chart.Series>
</charting:Chart>
but I always receive this error:
WinRT information: Cannot add instance of type
'WinRTXamlToolkit.Controls.DataVisualization.Charting.ColumnSeries' to
a collection of type
'System.Collections.ObjectModel.Collection<WinRTXamlToolkit.Controls.DataVisualization.Charting.ISeries>'
What can be the reason for this?
OK I found it,
The error was the ColumnSeries was missing the Title attribute, like this:
<charting:Chart Name="columnChart" Grid.Row="1" Grid.Column="1" Width="400" Height="400">
<charting:Chart.Series>
<charting:ColumnSeries
Title="Chart Title"
ItemsSource="{Binding items}"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Value}"
IsSelectionEnabled="True">
</charting:ColumnSeries>
</charting:Chart.Series>
</charting:Chart>
It seems that the Title attribute is mandatory.
Related
I've put a WebView inside of a FlipViewItem. The problem seems to be that in WP 8.1, the WebView does not get the gestures (presumably because they're absorbed by the FlipView). The desired result is to be able to scroll vertically and tap in the WebView but also to be able scroll horizontally for the FlipView (even if just in a limited area on the horizontal edges). Is there any solution or workaround for this?
<StackPanel>
<StackPanel Name="postTitle" Background="Transparent">
<TextBlock Name="ContentArea" Text="" FontSize="18" Margin="10, 5, 10, 0" TextWrapping="WrapWholeWords" FontWeight="Bold" Foreground="White"/>
<TextBlock Name="SubArea" Text="" FontSize="16" Margin="10, 0, 10, 10" TextWrapping="WrapWholeWords" Foreground="White"/>
</StackPanel>
<FlipView Name="swipeArea" Height="460" Margin="0" Padding="0" SelectedIndex="1" SelectionChanged="swipeArea_SelectionChanged">
<FlipViewItem Name="oneItem">
</FlipViewItem>
<FlipViewItem Name="mainFlipViewItem">
<Grid>
<ProgressRing Name="progRing" Foreground="White" Margin="0,25,0,0" Background="Transparent" Visibility="Collapsed" VerticalAlignment="Top"/>
<WebView Name="InterWindow" Height="460" Visibility="Collapsed" DefaultBackgroundColor="#5E5E5E"></WebView>
<ScrollViewer Name="Scrollster" ZoomMode="Enabled" MinZoomFactor="1" MaxZoomFactor="8" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Image Name="WebWindow" Height="420" HorizontalAlignment="Center" VerticalAlignment="Top">
</Image>
</ScrollViewer>
</Grid>
</FlipViewItem>
<FlipViewItem Name="threeItem">
</FlipViewItem>
</FlipView>
</StackPanel>
I believe I just found one workaround. I've added this to the WebView control:
Canvas.ZIndex="1000"
I can then set the width of the WebView control to something just slimmer than the FlipView itself, and then I should be good.
I have a windows 8.1 store app and I can't figure out how to get the datacontext to access my viewmodel for a relaycommand. The xaml works all the way up to the flyout and then it fails. So the button with content "buttonWorks" successfully gets the binding from the rootGrid element and calls the command on the viewmodel. But the button right below in the flyout does not. Why?
To make an example of the binding problem, create a new Store App with the Split App template. Then add a flyout to the SplitPage and bind a textbox text to the itemtitle element. The binding will not populate the flyout textbox. The code snippet looks like this:
<Image Source="{Binding ImagePath}" Grid.Row="1" Margin="0,0,20,0" Width="180" Height="180" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
<StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1">
<TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Title}" Style="{StaticResource SubheaderTextBlockStyle}"/>
<TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Subtitle}" Style="{StaticResource SubtitleTextBlockStyle}"/>
<Button Content="Update">
<Button.Flyout>
<Flyout>
<StackPanel>
<StackPanel Margin="5" Orientation="Vertical" >
<TextBlock Text="Item Title" VerticalAlignment="Bottom"/>
<TextBox Text="{Binding ElementName=itemTitle,Path=Text,Mode=TwoWay}" Width="200" />
</StackPanel>
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
</StackPanel>
I can get the command binding to work using Dani's answer and setting the datacontext on the button hosting the flyout like this, but I can't bind the textboxes as seen in the template example above
<Button Content="Update" HorizontalAlignment="Center" DataContext="{Binding ViewModel, ElementName=pageRoot}" >
<Button.Flyout>
<Flyout>
<StackPanel>
<TextBlock Text="Item Title" VerticalAlignment="Bottom"/>
<TextBox Text="{Binding ElementName=itemTitle,Path=Text,Mode=TwoWay}" Width="200" />
<Button x:Name="buttonTest" Margin="5" Height="40" Content="Test" HorizontalAlignment="Center" Command="{Binding UpdateMatchDataCommand}"/>
Original Code Example Problem:
<Grid Name="rootGrid" Tag="{Binding}" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
....
<ScrollViewer
x:Name="itemDetail"
AutomationProperties.AutomationId="ItemDetailScrollViewer"
Grid.Row="0"
Grid.Column="1"
Grid.RowSpan="2"
Padding="60,0,66,0"
HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
DataContext="{Binding SelectedItem, ElementName=itemListView}"
<Grid x:Name="itemDetailGrid" Margin="0,60,0,50">
<StackPanel Orientation="Vertical" Grid.Row="1" Margin="0,0,10,0" Width="180" Height="180">
<Button Name="buttonWorks" Content="Test" Command="{Binding Tag.UpdateMatchDataCommand,ElementName=rootGrid}"/>
<Button Content="Update" HorizontalAlignment="Center" >
<Button.Flyout>
<Flyout>
<Button Name="buttonFail" Content="Test" Command="{Binding Tag.UpdateMatchDataCommand,ElementName=rootGrid}"/>
</Flyout>
</Button.Flyout>
</Button>
</StackPanel>
....
If you work with ViewModels I would suggest that you change the DataContext to your page.
<Page
x:Name="rootPage"
DataContext="{Binding ViewModel, RelativeSource={RelativeSource Self}}"
...
And CodeBehind:
private readonly ViewModel _viewModel = new ViewModel();
public ViewModel ViewModel
{
get { return _viewModel; }
}
Now you can change your commands to:
<Button Name="buttonWorks" Content="Test" Command="{Binding Tag.UpdateMatchDataCommand}"/>
ElementName is now only necessary if you bind to a property in code behind.
It ends up that I could never solve the problem using the binding that the template provides. It appears to me that changing the datacontext of a single element in the flyout is not allowed. So, the way I got around it is to create a selected item in the viewmodel and changed the template code to bind to the selected item on view model. Then bind all elements including the command to the same datacontext for the entire form.
<ListView
x:Name="itemListView"
AutomationProperties.AutomationId="ItemsListView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.Row="1"
Margin="-10,-10,0,0"
Padding="120,0,0,60"
ItemsSource="{Binding Matches}"
SelectedItem="{Binding SelectedMatch, Mode=TwoWay}"
IsSwipeEnabled="False">
<ListView.ItemTemplate>
<DataTemplate>
Now the binding works for all fields including the template.
I am trying to add image next to pivot control title and I want to be able to touch it. But I can't and I guess it's because pivot is handling touches. This is my code:
<Grid Margin="162,22,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"
Tap="MessagesIcon_OnTap">
<Image Source="/Assets/Images/Icons/messages_icon.png"
x:Name="MessagesIcon"
Stretch="Fill" Opacity="1" Width="20" Height="22"
Tap="MessagesIcon_OnTap"/>
</Grid>
<phone:Pivot x:Name="PlayerPivot" Title="TITLE" >
<!--Pivot item one-->
<phone:PivotItem Margin="0" x:Name="PlayingPivotItem">
<phone:PivotItem.Header>
<TextBlock Text="subtitle" />
</phone:PivotItem.Header>
<Grid x:Name="ContentPanel">
...
As you can see I tried catch tap on both (grid which contains image and image it self) but it isn't call. What is the easiest way to get tap gesture on image? Thanks
Give a try using this snippet:
<controls:Pivot.Title>
<StackPanel>
<TextBlock Text="title" />
<Image Source="/Images/anyimage.png"/>
</StackPanel>
</controls:Pivot.Title>
create Pivot control with dynamic pivot items, within the pivot datatemplate have to show Items control that too will have data template..like below
<phone:Pivot x:Name="chatPivot" Margin="0 2 0 76" ItemsSource="{Binding Contacts}" SelectionChanged="chatPivot_SelectionChanged"> <phone:Pivot.ItemTemplate>
<DataTemplate>
<ScrollViewer x:Name="chatScroll" Margin="0,0,0,72" VerticalScrollBarVisibility="Auto">
<ItemsControl Margin="0" x:Name="chats" Tap="chats_Tap_1" ItemsSource="{Binding Messages}"
ItemTemplate="{StaticResource imgItemTemplate}" ItemsPanel="{StaticResource imgItemPanel}">
</ItemsControl>
</ScrollViewer>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
Here is my dataTemplate.
<phone:PhoneApplicationPage.Resources>
<ItemsPanelTemplate x:Key="imgItemPanel">
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
<DataTemplate x:Key="imgItemTemplate" >
<chatbubble:ChatBubbleControl x:Name="ChatBubble" Hold="ChatBubbleControl_Hold_1" />
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
I actually do not know the design of your "ChatbubbleControl" usercontrol but I found one issue why values are not getting bound.
<phone:PhoneApplicationPage.Resources>
<ItemsPanelTemplate x:Key="imgItemPanel">
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
<DataTemplate x:Key="imgItemTemplate" >
<chatbubble:ChatBubbleControl x:Name="ChatBubble" xyz="{Binding}" Hold="ChatBubbleControl_Hold_1" />
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
You are binding value to ItemsControl but you are not binding any value to actual control (here, chatbubblecontrol) that is displaying the value on screen.
The solution is the you need to create a property to your usercontrol e.g.: Here, I made a test property named "xyz". and then try to bind the values to it.
Hope this will help you conceptually.
I have a listview in my Windows store app:
<ListView ItemsSource="{Binding}" x:Name="lView" Grid.Column="1" HorizontalAlignment="Left" Height="586" Margin="74.714,105,0,0" VerticalAlignment="Top" Width="741" ItemTemplate="{StaticResource ImageTextListMailFolderTemplate}"/>
and a data template for this listview:
<DataTemplate x:Key="ImageTextListMailFolderTemplate">
<Grid Width="280">
<TextBlock Text="some text" FontSize="24" FontWeight="Light"
Margin="10,10,0,0" HorizontalAlignment="Left"
TextTrimming="WordEllipsis" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
In C# code, I'm using this as a source for listview:
List<string> GridViewData = new List<string>();
lView.ItemsSource = GridViewData;
My problem is: when I use listview without the template, all data from GridViewData is displayed in listview. But when I use DataTemplate, in each listview item is text "some text" like it is defined in template. But I want to use template, and in each item of listview show data from GridViewData. Can somebody help me please, how to do this?
Thank You
The text binding in your DataTemplate should be something like this:
Text="{Binding}"
Here is the full DataTemplate code:
<DataTemplate x:Key="ImageTextListMailFolderTemplate">
<Grid Width="280">
<TextBlock Text="{Binding}" FontSize="24" FontWeight="Light"
Margin="10,10,0,0" HorizontalAlignment="Left"
TextTrimming="WordEllipsis" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>