Pre loader

Listbox DataTemplate with SciChart problem with v3.0

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0
0

Hi,

We are using a listbox with a datatemplate with SciChart inside.
This worked fine with SciChart v2.x (see attachment)
We’ve implemented SciChart v3.0 and now the charts are being displayed differently. (see attachment)

How is this possible?

We are using the following xaml code:

<UserControl x:Class="Fluke.FV2.Subsystems.DataPresentation.UserInterface.Mvvm.Views.DetailsView"
        xmlns=" http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d=" http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
        xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WPF4"
        xmlns:mc=" http://schemas.openxmlformats.org/markup-compatibility/2006" 
        xmlns:vc="clr-namespace:Fluke.FV2.Subsystems.DataPresentation.UserInterface.Mvvm.Components"
        xmlns:vm="clr-namespace:Fluke.FV2.Subsystems.DataPresentation.UserInterface.Mvvm.ViewModel"
        xmlns:SciChart=" http://schemas.abtsoftware.co.uk/scichart" 
        mc:Ignorable="d"
        d:DesignWidth="640" d:DesignHeight="480"
        DataContext="{Binding Source={x:Static vm:ViewModelLocator.DetailsStatic}}"
        Visibility="{Binding Path=DetailsVisibility}" xmlns:c1=" http://schemas.componentone.com/winfx/2006/xaml"> 

    <UserControl.Resources>
        <vc:ImageConverter x:Key="ImageConverter"></vc:ImageConverter>
        <vc:DateTimeConverter x:Key="DateTimeConverter"></vc:DateTimeConverter>
        <vc:DateConverter x:Key="DateConverter"></vc:DateConverter>
        <vc:TimeConverter x:Key="TimeConverter"></vc:TimeConverter>

        <Style TargetType="{x:Type ListBox}" x:Key="ListBoxStyle">
        </Style>

        <DataTemplate x:Key="ItemTemplate">
            <Grid>
                <Border BorderBrush="#FFC20E" BorderThickness="3" Margin="10" Background="{StaticResource SnapshotBackgroundBrush}" CornerRadius="5">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Grid Grid.Row="0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="auto" />
                            </Grid.ColumnDefinitions>
                            <GroupBox Grid.Column="0" Margin="5" Header="{Binding Path=Snapshot.TimeStamp, Converter={StaticResource DateTimeConverter}}" 
                                      Visibility="{Binding Path=DataContext.ScreenVisibility, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}">
                                <Image Margin="2" Source="{Binding Path=Snapshot.Screen}" MaxHeight="240" MaxWidth="320" />
                            </GroupBox>
                            <SciChart:SciChartSurface Grid.Column="1" x:Name="sciChartSurface"
                                              RenderableSeries="{Binding Path=RenderableSeries}" 
                                              SciChart:ThemeManager.Theme="BrightSpark"
                                              XAxis="{Binding Path=XAxis}" 
                                              YAxes="{Binding Path=YAxes}"
                                              Annotations="{Binding Path=Annotations}"
                                              ChartModifier="{Binding Path=ChartModifier}"
                                              Visibility="{Binding Path=DataContext.WaveformVisibility, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"                                              
                                              Margin="0,3,0,3" Height="280">
                            </SciChart:SciChartSurface>
                            <Canvas Grid.Column="1" Background="Transparent"></Canvas>

                            <GroupBox x:Name="setupItem" Grid.Column="2" Margin="5" Width="200"
                                      Visibility="{Binding Path=DataContext.SetupVisibility, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}">
                                <GroupBox.Header>
                                    <StackPanel Orientation="Horizontal">
                                        <Label Content="Setup" />
                                        <Label Content=" " />
                                        <Label Content="{Binding Path=SetupDateTime, Converter={StaticResource DateTimeConverter}}"/>
                                    </StackPanel>
                                </GroupBox.Header>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="20" />
                                        <RowDefinition Height="20" />
                                        <RowDefinition Height="20" />
                                        <RowDefinition Height="23" />
                                        <RowDefinition Height="20" />
                                        <RowDefinition Height="20" />
                                        <RowDefinition Height="20" />
                                        <RowDefinition Height="20" />
                                    </Grid.RowDefinitions>
                                    <Label Grid.Row="0" Content="Instrument" FontStyle="Italic"></Label>
                                    <StackPanel Grid.Row="1" Margin="5,0,0,0" Orientation="Horizontal">
                                        <Label Content="{Binding Path=SetupInstrument}"></Label>
                                    </StackPanel>
                                    <Label Grid.Row="2" Content="Description" FontStyle="Italic"></Label>
                                    <StackPanel Grid.Row="3" Margin="5,0,0,0" Orientation="Horizontal">
                                        <TextBox Text="{Binding Path=SetupDescription}" MaxLength="11" Name="TextBoxSetupDescription" TextChanged="TextBoxSetupDescription_TextChanged"></TextBox>
                                    </StackPanel>
                                    <Label Grid.Row="4" Content="Datablock" FontStyle="Italic"/>
                                    <StackPanel Grid.Row="5" Margin="5,0,0,0" Name="SetupName" Orientation="Horizontal">
                                        <Label Content="Name"/>
                                        <Label Content=" = "/>
                                        <Label Content="{Binding Path=SetupName}"></Label>
                                    </StackPanel>
                                    <StackPanel Grid.Row="6" Margin="5,0,0,0" Name="SetupDate" Orientation="Horizontal">
                                        <Label Content="Date"/>
                                        <Label Content=" = "/>
                                        <Label Content="{Binding Path=SetupDateTime, Converter={StaticResource DateConverter}}"/>
                                    </StackPanel>
                                    <StackPanel Grid.Row="7" Margin="5,0,0,0" Name="SetupTime" Orientation="Horizontal">
                                        <Label  Content="Time"/>
                                        <Label  Content=" = "/>
                                        <Label  Content="{Binding Path=SetupDateTime, Converter={StaticResource TimeConverter}}"/>
                                    </StackPanel>
                                    <Grid Background="Transparent" Grid.ColumnSpan="3"></Grid>
                                </Grid>
                            </GroupBox>

                        </Grid>

                        <c1:C1Expander Grid.Row="2" Margin="5" Name="c1ExpanderDescription" CornerRadius="2" 
                                       Header="{Binding Path=DataContext.Description, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" 
                                       HeaderFontSize="14" HeaderFontFamily="Segoe UI">
                            <!--<TextBlock Text="{Binding Path=Snapshot.Comments}" MouseEnter="ExtraInfo_MouseEnter" MouseLeave="ExtraInfo_MouseLeave" Tag="7" />-->
                            <!--<vc:AutoCompleteTextBox AutoText="{Binding Path=Snapshot.Comments}" Height="23" x:Name="acTextBoxComments" DelayTime="400" Threshold="2" MouseEnter="ExtraInfo_MouseEnter" MouseLeave="ExtraInfo_MouseLeave" Tag="7" />-->
                            <TextBox Text="{Binding Path=Snapshot.Comments}" MouseLeave="ExtraInfo_MouseLeaveDescription" Tag="7" AcceptsReturn="True" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto"></TextBox>
                        </c1:C1Expander>
                        <c1:C1Expander Grid.Row="1" Margin="5,0,5,5" Name="c1ExpanderExtraInfo" CornerRadius="2" 
                                       Header="{Binding Path=DataContext.ExtraInfo, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" 
                                       HeaderFontSize="14" HeaderFontFamily="Segoe UI">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                    <RowDefinition />
                                    <RowDefinition />
                                    <RowDefinition />
                                    <RowDefinition />
                                    <RowDefinition />
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="100" />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Label Margin="2" Grid.Column="0" Grid.Row="0" Content="{Binding Path=DataContext.ExtraInfoTitle, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"></Label>
                                <vc:AutoCompleteTextBox Grid.Column="1" Grid.Row="0" AutoText="{Binding Path=Snapshot.Title}"  Height="23" x:Name="acTextBoxTitle" DelayTime="400" Threshold="2" MouseEnter="ExtraInfo_MouseEnter" MouseLeave="ExtraInfo_MouseLeave" Tag="0"/>
                                <!--<TextBox Grid.Column="1" Grid.Row="0" Text="{Binding Path=Snapshot.Title}"></TextBox>-->

                                <Label Margin="2" Grid.Column="0" Grid.Row="1" Content="{Binding Path=DataContext.ExtraInfoSubTitle, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"></Label>
                                <vc:AutoCompleteTextBox Grid.Column="1" Grid.Row="1" AutoText="{Binding Path=Snapshot.SubTitle}"  Height="23" x:Name="acTextBoxSubTitle" DelayTime="400" Threshold="2" MouseEnter="ExtraInfo_MouseEnter" MouseLeave="ExtraInfo_MouseLeave" Tag="1"/>
                                <!--<TextBox Grid.Column="1" Grid.Row="1" Text="{Binding Path=Snapshot.SubTitle}"></TextBox>-->

                                <Label Margin="2" Grid.Column="0" Grid.Row="2" Content="{Binding Path=DataContext.ExtraInfoCompanyName, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"></Label>
                                <vc:AutoCompleteTextBox Grid.Column="1" Grid.Row="2" AutoText="{Binding Path=Snapshot.CompanyName}"  Height="23" x:Name="acTextBoxCompanyName" DelayTime="400" Threshold="2" MouseEnter="ExtraInfo_MouseEnter" MouseLeave="ExtraInfo_MouseLeave" Tag="2"/>
                                <!--<TextBox Grid.Column="1" Grid.Row="2" Text="{Binding Path=Snapshot.CompanyName}"></TextBox>-->

                                <Label Margin="2" Grid.Column="0" Grid.Row="3" Content="{Binding Path=DataContext.ExtraInfoCompanyInfo, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"></Label>
                                <vc:AutoCompleteTextBox Grid.Column="1" Grid.Row="3" AutoText="{Binding Path=Snapshot.CompanyInfo}"  Height="23" x:Name="acTextBoxCompanyInfo" DelayTime="400" Threshold="2" MouseEnter="ExtraInfo_MouseEnter" MouseLeave="ExtraInfo_MouseLeave" Tag="3"/>
                                <!--<TextBox Grid.Column="1" Grid.Row="3" Text="{Binding Path=Snapshot.CompanyInfo}"></TextBox>-->

                                <Label Margin="2" Grid.Column="0" Grid.Row="4" Content="{Binding Path=DataContext.ExtraInfoContactPerson, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"></Label>
                                <vc:AutoCompleteTextBox Grid.Column="1" Grid.Row="4" AutoText="{Binding Path=Snapshot.ContactPerson}"  Height="23" x:Name="acTextBoxContactPerson" DelayTime="400" Threshold="2" MouseEnter="ExtraInfo_MouseEnter" MouseLeave="ExtraInfo_MouseLeave" Tag="4"/>
                                <!--<TextBox Grid.Column="1" Grid.Row="4" Text="{Binding Path=Snapshot.ContactPerson}"></TextBox>-->

                                <Label Margin="2" Grid.Column="0" Grid.Row="5" Content="{Binding Path=DataContext.ExtraInfoContactInfo, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"></Label>
                                <vc:AutoCompleteTextBox Grid.Column="1" Grid.Row="5" AutoText="{Binding Path=Snapshot.ContactInfo}"  Height="23" x:Name="acTextBoxContactInfo" DelayTime="400" Threshold="2" MouseEnter="ExtraInfo_MouseEnter" MouseLeave="ExtraInfo_MouseLeave" Tag="5"/>
                                <!--<TextBox Grid.Column="1" Grid.Row="5" Text="{Binding Path=Snapshot.ContactInfo}"></TextBox>-->

                                <Label Margin="2" Grid.Column="0" Grid.Row="6" Content="{Binding Path=DataContext.ExtraInfoTestDevice, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"></Label>
                                <vc:AutoCompleteTextBox Grid.Column="1" Grid.Row="6" AutoText="{Binding Path=Snapshot.TestDevice}"  Height="23" x:Name="acTextBoxTestDevice" DelayTime="400" Threshold="2" MouseEnter="ExtraInfo_MouseEnter" MouseLeave="ExtraInfo_MouseLeave" Tag="6"/>
                                <!--<TextBox Grid.Column="1" Grid.Row="6" Text="{Binding Path=Snapshot.TestDevice}"></TextBox>-->
                            </Grid>
                        </c1:C1Expander>

                    </Grid>
                </Border>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="SelectedTemplate">
            <Border BorderBrush="Yellow" BorderThickness="1" Margin="10" Background="{StaticResource SnapshotBackgroundBrush}" CornerRadius="5">
                <StackPanel Margin="5">
                    <Image Margin="2" Source="{Binding Path=Snapshot.Screen}" />
                    <TextBlock Margin="2" Text="{Binding Path=Snapshot.TimeStamp, Converter={StaticResource DateTimeConverter}}" Foreground="White" />
                    <TextBlock Margin="2" Text="{Binding Path=Snapshot.Location}" Foreground="White" />
                </StackPanel>
            </Border>
        </DataTemplate>

        <Style TargetType="{x:Type ListBoxItem}" x:Key="ContainerStyle">
            <Setter Property="ContentTemplate" Value="{StaticResource ItemTemplate}" />
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="ContentTemplate" Value="{StaticResource ItemTemplate}" />
                </Trigger>
            </Style.Triggers>
            <Style.Resources>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Transparent" />
                <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
            </Style.Resources>
        </Style>
    </UserControl.Resources>

    <!--**********************************************************-->
    <!--***** Here starts the 'real' drawing of the controls *****-->
    <!--**********************************************************-->

    <Grid Name="mainGrid" Style="{StaticResource FlukeStyle}" HorizontalAlignment="Stretch" SizeChanged="MainGrid_SizeChanged">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="63" />
        </Grid.RowDefinitions>

        <Image Grid.Row="0" Visibility="{Binding ImageVisibility}" Source="{Binding Path=ScreenImage, Converter={StaticResource ImageConverter} }" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5"></Image>
        
        <ListBox Style="{StaticResource ListBoxStyle}" Grid.Row="0" Name="listBoxSnapshots" HorizontalContentAlignment="Stretch" ItemContainerStyle="{StaticResource ContainerStyle}" ItemsSource="{Binding Snapshots}" SelectedItem="{Binding SelectedItem}" BorderThickness="0" Background="Transparent" SelectionMode="Extended" MouseDoubleClick="ListBoxSnapshots_MouseDoubleClick" Visibility="{Binding ListboxVisibility}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="SelectionChanged">
                    <cmd:EventToCommand Command="{Binding SelectionChangedCommand}" CommandParameter="{Binding SelectedItems, ElementName=listBoxSnapshots}" />
                </i:EventTrigger>
                <i:EventTrigger EventName="MouseDoubleClick">
                    <i:InvokeCommandAction Command="{Binding DoubleClickCommand}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Name="wrapPanelListBox" Orientation="Horizontal" IsItemsHost="True" 
                                      Width="{Binding Path=DataContext.WrapPanelWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"
                        />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>

        <Border BorderBrush="Black" BorderThickness="1" Margin="2,1,2,2" HorizontalAlignment="Stretch" Grid.Row="1">
            <Grid>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Visibility="{Binding CheckboxesVisibility}">
                    <CheckBox Style="{StaticResource styleCustomCheckBox}" Content="Screen" IsChecked="{Binding ScreenChecked}"/>
                    <CheckBox Style="{StaticResource styleCustomCheckBox}" Content="Waveform" IsChecked="{Binding WaveformChecked}"/>
                    <CheckBox Style="{StaticResource styleCustomCheckBox}" Content="Setup" IsChecked="{Binding SetupChecked}"/>
                </StackPanel>
                <Button HorizontalAlignment="Center" Content="Close" Height="32" Width="75" Visibility="{Binding ImageVisibility}" Command="{Binding CloseImageCommand}"></Button>
            </Grid>
        </Border>

    </Grid>
</UserControl>

Thanks and best regards,
Egbert

Images
  • You must to post comments
0
0

Hi,

Please, try replacing the WrapPanel with StackPanel:

<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel Name="wrapPanelListBox" Orientation="Horizontal" IsItemsHost="True"
                          Width="{Binding Path=DataContext.WrapPanelWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"
            />
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>

I think this should work as expected, except the case you really need WrapPanel’s behavior.

Please, let us know.

Best regards,
Yuriy

  • EJansen
    Hi, I'm sorry, but this does not work.
  • Yuriy Zadereckiy
    Thank you Egbert! We need to look deeper into the issue. I'll get back to you after the investigation. Best regards, Yuriy
  • Yuriy Zadereckiy
    Hi there, The issue has been fixed and we are going to include it in the update, which is out on the weekend. Best regards, Yuriy
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies