SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and now iOS Charting & Android Chart Components

Welcome to the SciChart Community Forums!

Please use the forums below to ask questions about SciChart. Take a moment to read our Question asking guidelines on how to ask a good question and our support policy

We also have a tag=SciChart on Stackoverflow.com where you can earn rep for your questions!

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
    Thank you Egbert! We need to look deeper into the issue. I'll get back to you after the investigation.Best regards, Yuriy
  • Yuriy
    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.