I have a problem trying to give the series his respectives panes. The three series appears in the same Pane. Do you need to do it in a different way when do you use SeriesItemTemplateSelector?
Error: Cannot find source for binding with reference 'ElementName=pane2'. BindingExpression:(no path); DataItem=null; target element is 'AreaSeries2D' (Name=''); target property is 'Pane' (type 'Object')
<dxc:ChartControl Background="{StaticResource ControlsPrincipalColor}" BorderBrush="{StaticResource ControlsPrincipalColor}">
<dxc:ChartControl.DataContext>
<vm:ChartViewModel/>
</dxc:ChartControl.DataContext>
<dxc:XYDiagram2D Margin="-68,0,-68,0" EnableAxisXNavigation="True" Background="Transparent">
<dxc:XYDiagram2D.SeriesItemsSource>
<MultiBinding Converter="{StaticResource ChartModelConverter}">
<Binding Source="{StaticResource Graphic}"/>
<Binding RelativeSource="{x:Static RelativeSource.Self}" Path="DataContext"/>
</MultiBinding>
</dxc:XYDiagram2D.SeriesItemsSource>
<dxc:XYDiagram2D.PanesPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
<RowDefinition Height="200"/>
<RowDefinition Height="200"/>
</Grid.RowDefinitions>
</Grid>
</ItemsPanelTemplate>
</dxc:XYDiagram2D.PanesPanel>
<dxc:XYDiagram2D.DefaultPane>
<dxc:Pane x:Name="pane1" Grid.Row="0">
<dxc:Pane.AxisXScrollBarOptions>
<dxc:ScrollBarOptions Visible="False" />
</dxc:Pane.AxisXScrollBarOptions>
</dxc:Pane>
</dxc:XYDiagram2D.DefaultPane>
<dxc:XYDiagram2D.Panes>
<dxc:Pane x:Name="pane2" Grid.Row="1">
<dxc:Pane.AxisXScrollBarOptions>
<dxc:ScrollBarOptions Visible="False" />
</dxc:Pane.AxisXScrollBarOptions>
</dxc:Pane>
<dxc:Pane x:Name="pane3" Grid.Row="2"/>
</dxc:XYDiagram2D.Panes>
<dxc:XYDiagram2D.SeriesItemTemplateSelector>
<templateselectors:ChartAreaTemplateSelector>
<templateselectors:ChartAreaTemplateSelector.FirstTemplate>
<DataTemplate>
<dxc:AreaSeries2D Brush="{StaticResource CorporativeColor1}" Transparency="0.7" DataSource="{Binding Values}" ArgumentDataMember="Date" ValueDataMember="Value"/>
</DataTemplate>
</templateselectors:ChartAreaTemplateSelector.FirstTemplate>
<templateselectors:ChartAreaTemplateSelector.SecondTemplate>
<DataTemplate>
<dxc:AreaSeries2D Brush="{StaticResource CorporativeColor2}" Transparency="0.7" DataSource="{Binding Values}" ArgumentDataMember="Date" ValueDataMember="Value" Pane="{Binding ElementName=pane2}"/>
</DataTemplate>
</templateselectors:ChartAreaTemplateSelector.SecondTemplate>
<templateselectors:ChartAreaTemplateSelector.ThirdTemplate>
<DataTemplate>
<dxc:AreaSeries2D Brush="{StaticResource CorporativeColor3}" Transparency="0.7" DataSource="{Binding Values}" ArgumentDataMember="Date" ValueDataMember="Value" dxc:XYDiagram2D.SeriesPane="{Binding ElementName=pane3}"/>
</DataTemplate>
</templateselectors:ChartAreaTemplateSelector.ThirdTemplate>
</templateselectors:ChartAreaTemplateSelector>
</dxc:XYDiagram2D.SeriesItemTemplateSelector>
<dxc:XYDiagram2D.AxisX>
<dxc:AxisX2D TickmarksMinorVisible="False" TickmarksVisible="False" GridLinesVisible="False" Visible="True" Alignment="Far" Brush="{x:Null}">
<dxc:AxisX2D.DateTimeScaleOptions>
<dxc:ContinuousDateTimeScaleOptions/>
</dxc:AxisX2D.DateTimeScaleOptions>
<dxc:AxisX2D.Label>
<dxc:AxisLabel Foreground="{StaticResource PrincipalForeground}"/>
</dxc:AxisX2D.Label>
</dxc:AxisX2D>
</dxc:XYDiagram2D.AxisX>
<dxc:XYDiagram2D.AxisY>
<dxc:AxisY2D Visible="True" GridLinesVisible="False" GridLinesMinorVisible="False" Interlaced="False"/>
</dxc:XYDiagram2D.AxisY>
</dxc:XYDiagram2D>
</dxc:ChartControl>
To resolve this issue, set the XYDiagram2D.PaneItemsSource property to generate the chart's diagram pane elements from a ViewModel and link them to the corresponding Series items.
Refer to the How to bind a chart to its ViewModel example that illustrates this approach.
Related
I am completely confused using relativeSource and ancestorLevel.
Relative source is used for to get source from another elements. But to do that successfully you have to count at what level is that element. (How to debug?) It is most confusing part in WPF.
In my example i have context menu that i want to bind datasource and then command. How would binding must be to get command in my vm? Thank you
<Page.DataContext>
<PDB:UsersViewModel x:Name="vm"/>
</Page.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--Page Header info content-->
<Grid Grid.Row="0">
<TextBlock Text="{Binding SelectedUser.Name}"/>
<TextBlock Text="{Binding ElementName=myGrd, Path=CurrentColumn.DisplayIndex}"/>
</Grid>
<!--Datagrid content-->
<DataGrid x:Name="myGrd"
SelectionMode="Single"
SelectionUnit="Cell"
CurrentItem="{Binding SelectedUser, Mode=TwoWay}"
CurrentColumn="{Binding CurrentColumn, Mode=TwoWay}"
IsReadOnly="True"
Grid.Row="1"
ItemsSource="{Binding FilteredUserList}"
AutoGenerateColumns="True"
CanUserAddRows="False"
>
<DataGrid.Resources>
<ContextMenu x:Key="ContextMenu">
<ContextMenu.Items>
<MenuItem Header="{Binding
RelativeSource={RelativeSource
FindAncestor,
AncestorType={x:Type Page},
AncestorLevel=4}, Path=vm}" />
</ContextMenu.Items>
</ContextMenu>
</DataGrid.Resources>
<DataGrid.CellStyle>
<Style TargetType="DataGridCell">
<Setter Property="ContextMenu" Value="{StaticResource ContextMenu}"/>
</Style>
</DataGrid.CellStyle>
</DataGrid>
</Grid>
You can't use RelativeSource in ContextMenu, because the menu is not a part of the visual tree. However this can be avoided by using Binding Source and x:Reference.
I assume your ViewModel looks like this
public class UserViewModel
{
public string Header { get; set; }
public ICommand MyCommand { get; }
... more code
}
Now let's bind Header and MyCommand properties of the VM
<ContextMenu x:Key="ContextMenu">
<ContextMenu.Items>
<MenuItem Header="{Binding Header, Source={x:Reference vm}}"
Command="{Binding MyCommand, Source={x:Reference vm}}"/>
</ContextMenu.Items>
</ContextMenu>
The important part is to have the ViewModel somewhere in the visual tree and set its x:Name, just like you've done in your example
<Page.DataContext>
<PDB:UsersViewModel x:Name="vm"/>
</Page.DataContext>
If you still want to know more about RelativeSource, this question seems to have the same problem as you. Basically Path of the binding has to be DataContext.MyViewModelProperty and the RelativeSource of the binding must be and element with DataContext set to the ViewModel.
I am new to WPF binding/templating. I have some basic questions about a templated TabControl I have as below :
<TabControl x:Name="tcTabs" ItemsSource="{Binding Rooms, UpdateSourceTrigger=PropertyChanged}" Grid.Row="1" Margin="5" BorderThickness="1" IsSynchronizedWithCurrentItem="True">
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Header" Value="{Binding Name}" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="130"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="22"/>
</Grid.RowDefinitions>
<ListBox Grid.Row="0" Grid.Column="0" BorderThickness="0" ItemsSource="{Binding Messages}" DisplayMemberPath="Raw" />
<ListBox Grid.Row="0" Grid.Column="1" BorderThickness="1,0,0,0" BorderBrush="#FFBBBBBB" ItemsSource="{Binding Users}" DisplayMemberPath="Nick" />
<TextBox Grid.Row="1" Grid.ColumnSpan="2" BorderThickness="0,1,0,0" BorderBrush="#FFBBBBBB" Height="22" />
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.ItemContainerStyle>
</TabControl>
The TabControl contains in each tab 2 list boxes and a textbox. One of the listboxes contains user names is is not necessary all the time.
There are 3 kinds of tabs, Server tabs, room tabs and private tabs. In private and server tabs the user list should not exist or be hidden.
I have an enum on the bound room object :
public enum IRCRoomType
{
Server,
Channel,
Private
}
How do I automatically hide the user list based on the enum, I have seen samples of 2 approaches, the binding on visibility with a converter or a trigger. Which is the better approach and are there any more?
When there are no tabs, and the first tab is created it is not automatically selected, how do I select it?
Is there a way of impacting the item styles inside the listboxes depending on tab type? How would I acheive this?
I am just looking for links/hints and not for actual solutions, but if you can give code then that would be a bonus!
It depends on how complicated code. If it's simple I rather use Trigger (you have everything which belows to UI in XAML), but if code is much more complicated consider using Converters (It's actually simpler to use it)
Bind to SelectedIndex of List and set it to 0?
Yes, of course, you can use ContentControl with DataTemplate (Or just DataTemplate in some cases) Some code where I use it:
<ListBox>
<ListBox.Resources>
<DataTemplate DataType="{x:Type your_namespace:your_type}">
... your code ...
</DataTemplate>
<DataTemplate DataType="{x:Type system:String}">
... your code ...
</DataTemplate>
</ListBox.Resources>
</ListBox>
Code you posted is actually a new Template, but you've changed the Style. Please consider override some Template.
Best regards
I have a WPF issue that I don't understand - can anyone help?
The WPF below is used as the ContentTemplate for a standard TabControl and resides within a ResourceDictionary. MyElementItemsControl is a simple derivative of ItemsControl and MyDesignCanvas is a simple derivative of Canvas.
<DataTemplate x:Key="TabContent" x:Shared="False">
<Grid>
<Grid Grid.RowSpan="2">
<ScrollViewer x:Name="contentScrollViewer" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" >
<Grid>
<View:MyElementItemsControl BorderBrush="Transparent" x:Name="schedulePanel" ItemsSource="{Binding Path=Elements}" Background="White">
<View:MyElementItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<View:MyDesignCanvas Height="1000" Width="1000" HorizontalAlignment="Left" VerticalAlignment="Top"
SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
Background="Transparent">
</View:MyDesignCanvas>
</ItemsPanelTemplate>
</View:MyElementItemsControl.ItemsPanel>
</View:MyElementItemsControl>
<Grid.LayoutTransform>
<TransformGroup>
<ScaleTransform>
<ScaleTransform.ScaleX>
<Binding ElementName="SlideZoom" Path="Value" Mode="OneWay"/>
</ScaleTransform.ScaleX>
<ScaleTransform.ScaleY>
<Binding ElementName="SlideZoom" Path="Value" Mode="OneWay"/>
</ScaleTransform.ScaleY>
</ScaleTransform>
</TransformGroup>
</Grid.LayoutTransform>
</Grid>
</ScrollViewer>
</Grid>
<Slider Opacity="0.5" VerticalAlignment="Top" HorizontalAlignment="Left" Width="300" Grid.Row="1" Name="SlideZoom" Orientation="Horizontal" Minimum="0.1" Maximum="3" Value="1">
</Slider>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
</Grid>
</DataTemplate>
When I run the code I get two issues I don't understand:
I seem to only get a single ScrollViewer when I would expect a ScrollViewer per item. So if I add two tab items and make the canvas different sizes, the scroll bars are adjusted to the size of the biggest canvas only. I expected that the Shared=False attribute would create new instances of the template for each tab.
Maybe related to item 1 - if I stick a breakpoint on the constructor of MyDesignCanvas it gets hit when the first tab is added but not when other tabs are added. Only when I start closing tabs does the breakpoint get hit again - I would expect a hit on each tab addition.
I guess I don't really understand data templating enough, so can anyone explain what might be going on or point me at some resources that may help me diagnose this?
Thanks
I've realised what the issue is - the WPF TabControl does internal virtualization of tab content, so has been re-using the tab contents and just changing the data context despite me using Shared=False. See this SO question and this one too for more details.
I have a ListView with a dataTemplate which I need to bind to 3 different sources with the same index. I think I have to do this completely in XAML, because the sources (chart) only exists in xaml. I'm using the MVVM Pattern."
I have wrote down how it "should" work, the index i is the common key.
<ListView ItemsSource="{Binding ???}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<!-- Small rectangle filled with the same color as the corresponding line -->
<Rectangle
Height="10"
Width="10"
Fill="{Binding ElementName=chart, Path=Series[i].LineStroke}" />
<!-- The title of the corresponding line -->
<TextBlock
x:Name="Title"
Text="{Binding ElementName=chart, Path=Series[i].DataSeries.Title}" />
<!-- The actual value of the corresponding line on the current position-->
<TextBlock
x:Name="Value"
Text="{Binding ElementName=chart, Path=Behaviour.Behaviours[0].CurrentPoints[i].Y}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Mh, lets see. How about you bind you listview to chart.Series this way you get the right number of elements. An then in your data template you bind the properties of the series. For the behaviour you could use MultiBinding and a converter to extract the data
<ListView ItemsSource="{Binding Path=Series, ElementName=chart}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<!-- Small rectangle filled with the same color as the corresponding line -->
<Rectangle
Height="10"
Width="10"
Fill="{Binding Path=LineStroke}" />
<!-- The title of the corresponding line -->
<TextBlock
x:Name="Title"
Text="{Binding Path=DataSeries.Title}" />
<!-- The actual value of the corresponding line on the current position-->
<TextBlock x:Name="Value">
<TextBlock.Text>
<MultiBinding Converter="{StaticResource ChartSeriesBehaviourConverter}">
<Binding ElementName=chart/>
<Binding/>
<MultiBinding>
</TextBlock>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Now you should get the chart and the current series object passed into your converter where you should be able to do something like var idx = chart.Series.IndexOf(s) so you can access the corresponding point in the behaviours.
I'm developping a Windows Phone 7 app with the Pivot template. This app has a menu toolbar (at the bottom of course).
When I click on the search button (MenusButtonsApplication_Click event to go to the "One" tab), a search page with a ListBox containing some elements is displayed. When I click on one of these elements (ListBoxFoobarSelectionChanged event), I get redirected to another page to show me some details. I use this method.
To go back to the search page again, I must click twice on the search button (MenusButtonsApplication_Click event). Which is not normal.
After a debug, I found that the first click is related to the ListBoxFoobarSelectionChanged while calling the MenusButtonsApplication_Click.
This is the XAML code:
<phone:PhoneApplicationPage
x:Class="Test.Soft.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="clr-namespace:Phone.Controls.Samples;assembly=Phone.Controls.Samples"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
shell:SystemTray.IsVisible="True"
mc:Ignorable="d" d:DesignHeight="696" d:DesignWidth="480">
<!--Ressources application-->
<phone:PhoneApplicationPage.FontFamily>
<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
</phone:PhoneApplicationPage.FontFamily>
<phone:PhoneApplicationPage.FontSize>
<StaticResource ResourceKey="PhoneFontSizeNormal"/>
</phone:PhoneApplicationPage.FontSize>
<phone:PhoneApplicationPage.Foreground>
<StaticResource ResourceKey="PhoneForegroundBrush"/>
</phone:PhoneApplicationPage.Foreground>
<Grid x:Name="LayoutRoot" Background="Transparent">
<controls:PivotControl x:Name="pvPrincipal" SelectedIndex="0" TitleTemplate="{StaticResource titleTemplate}" HorizontalAlignment="Left" Width="480" FontSize="22" DefaultItemWidth="480" FontStretch="Normal" Height="697" VerticalAlignment="Top" Margin="0,27,0,0" HorizontalContentAlignment="Left" IsEnabled="True" Visibility="Visible">
<!-- Recherche de comptes -->
<controls:PivotItem Name="pivotOne" Header="One" Loaded="PivotOne_Loaded">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="192*" />
<RowDefinition Height="423*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<ListBox Name="lbSearch" Width="462" Height="377" HorizontalAlignment="Left" BorderThickness="1"
VerticalAlignment="Bottom" SelectionChanged="ListBoxCompteSelectionChanged" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Padding="25,0,0,10" Text="{Binding FoobarCode}" Width="80" HorizontalAlignment="Right" />
<TextBlock Text="- " />
<TextBlock Text="{Binding FoobarDescription}" Padding="5,3,5,5" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
</controls:PivotItem>
<!-- Details -->
<controls:PivotItem x:Name="pivotDetails" Header="Details" >
<Grid Name="grDetail" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="398*" />
<RowDefinition Height="167*" />
</Grid.RowDefinitions>
<ListBox>
<StackPanel Margin="5,0,12,20" Grid.ColumnSpan="2">
<TextBlock FontSize="26" FontWeight="Bold"
FontStyle="Normal" Foreground="White" HorizontalAlignment="Left">Détail d'un compte</TextBlock>
</StackPanel>
<StackPanel Grid.Row="1" >
<TextBlock Text="{Binding Path= FoobarCode}" Name="tbCode" HorizontalAlignment="Left" FontWeight="Bold"/>
<TextBlock Text="{Binding Path= Description}" Name="tbDescription" FontWeight="Bold" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Grid.Row="2" >
</StackPanel>
</ListBox>
</Grid>
</controls:PivotItem>
</Grid>
<!-- ApplicationBar-->
<phone:PhoneApplicationPage.ApplicationBar >
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton x:Name="btnToPivotOne" IconUri="/Icons/appbar.plan.rest.png" Text="One" Click="MenusButtonsApplication_Click"></shell:ApplicationBarIconButton>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem x:Name="menuToPivotOne" Text="To pivot One" Click="MenusButtonsApplication_Click"></shell:ApplicationBarMenuItem>
</shell:ApplicationBarMenuItem>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>
This interface has:
A pivot (pcPrincipal) containing two tabs (One and Details)
An application bottom bar
For the two buggy functions, here they are:
private void ListBoxFoobarSelectionChanged(object sender, SelectionChangedEventArgs e)
{
grDetail.DataContext = lbSearch.SelectedItem;
lblDescriptionType.Text = mainVM.RetourneDescriptionTypeEncours();
pvPrincipalSelectedItem = pivotDetail;
}
private void MenusButtonsApplication_Click(object sender, EventArgs e)
{
if (sender is ApplicationBarIconButton)
{
switch ((sender as ApplicationBarIconButton).Text)
{
case "One":
// Affichage pivot plan
pvAccueil.Dispatcher.BeginInvoke(() =>
{
pvPrincipal.SelectedItem = pivotOne;
});
break;
default:
break;
}
}
else
{
if (sender is ApplicationBarMenuItem)
{
switch ((sender as ApplicationBarMenuItem).Text)
{
case "To pivot One":
pvAccueil.Dispatcher.BeginInvoke(() =>
{
pvPrincipal.SelectedItem = pivotOne;
});
break;
default:
break;
}
}
}
}
Is it a .NET bug? How can I resolve it? May be should I fire it manually?
Thank you.
It sounds like the button you are using to navigtate back is in the listbox so the first time you "click" it you are actually just selecting the item in the list and the second "click" actually triggers the navigation.
If this is the case, the solution is to move the "Back/search" button outside of hte listbox.
Alternatively, have the navigation take place in the handler for the SelectionChanged event.
Edit.
What is Phone.Controls.Samples.PivotControl?
And why are you using this rather than the standard one?