Telerik Forums
UI for WPF Forum
2 answers
664 views

Hello, I am trying to stylize a combo box to look like the "Combo.png" image, but I am facing some problems.

The image "Combo atual.png" shows the farest I could go, but there's some problems:
- There is no border;
- I can only open the combo box popup, by clicking on the DropDownIcon, and I would like to opent it, by clicking on the entire component.


So, I would like a transparent/white combobox that I can open and close the popup, by clinking wherever I want inside the component, like the non stylized telerik combobox.



Notice that the gi:GIComboBox, is a component of mine that inherits the RadComboBox. So, it is the same as use "telerik:RadComboBox".

Can anyone help me to figure it out?

Here is my code:

<ResourceDictionary
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    xmlns:Telerik_Windows_Controls_MaskedTextBox="clr-namespace:Telerik.Windows.Controls.MaskedTextBox;assembly=Telerik.Windows.Controls.Input"
    xmlns:Telerik_Windows_Controls_Chromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
    xmlns:Telerik_Windows_Controls_MaskedInput="clr-namespace:Telerik.Windows.Controls.MaskedInput;assembly=Telerik.Windows.Controls.Input"    
    xmlns:Chromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
    xmlns:gi="clr-namespace:NL.GI.ComponentesWPF.Cliente">
 
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/NL.GI.ComponentesWPF.Cliente;component/Themes/System.Windows.xaml" />
        <ResourceDictionary Source="/NL.GI.ComponentesWPF.Cliente;component/Themes/Telerik.Windows.Controls.xaml" />
        <ResourceDictionary Source="/NL.GI.ComponentesWPF.Cliente;component/Themes/Telerik.Windows.Controls.Input.xaml" />
        <ResourceDictionary Source="/NL.GI.ComponentesWPF.Cliente;component/Themes/Telerik.Windows.Controls.GridView.xaml" />
        <ResourceDictionary Source="/NL.GI.ComponentesWPF.Cliente;component/Themes/GIBase.xaml"/>
    </ResourceDictionary.MergedDictionaries>
 
    <Style x:Key="GIComboBoxStyle" TargetType="{x:Type gi:GIComboBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type gi:GIComboBox}">
                    <Grid x:Name="VisualRoot">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Content">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#FF8D8D8D"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderEnabled" Storyboard.TargetName="ButtonChrome">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <System:Boolean>False</System:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonChrome">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="0.6"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledBorder">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderMouseOver" Storyboard.TargetName="ButtonChrome">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <System:Boolean>True</System:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="Black"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="DropDownOpen">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="Black"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border Background="{TemplateBinding Background}" CornerRadius="1" IsHitTestVisible="False"/>
                        <telerik:RadToggleButton x:Name="PART_DropDownButton" BorderBrush="Black" ClickMode="Press" Foreground="{TemplateBinding Foreground}" IsTabStop="False" InnerCornerRadius="0" Margin="0" Padding="0">
                            <telerik:StyleManager.Theme>
                                <telerik:Office_BlackTheme/>
                            </telerik:StyleManager.Theme>
                            <telerik:RadToggleButton.Template>
                                <ControlTemplate TargetType="{x:Type telerik:RadToggleButton}">
                                    <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
                                </ControlTemplate>
                            </telerik:RadToggleButton.Template>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Border x:Name="DisabledBorder" BorderBrush="#FF989898" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" CornerRadius="1" IsHitTestVisible="False" Opacity="0"/>
                                <Chromes:ButtonChrome x:Name="ButtonChrome" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" CornerRadius="1" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsDropDownOpen}" RenderFocused="{TemplateBinding IsFocused}" RenderEnabled="{TemplateBinding IsEnabled}">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme/>
                                    </telerik:StyleManager.Theme>
                                </Chromes:ButtonChrome>
                                <Border Background="{TemplateBinding Background}" Grid.ColumnSpan="2" CornerRadius="1" IsHitTestVisible="False" Margin="1"/>
                                <ContentControl x:Name="DropDownIcon" Background="White" Grid.Column="1" Foreground="Black" IsTabStop="False">
                                    <ContentControl.Template>
                                        <ControlTemplate TargetType="{x:Type ContentControl}">
                                            <Grid Margin="5,0">
                                                <Path x:Name="BackgroundIcon" Data="M0,0L2,0 1,1z" Fill="{TemplateBinding Background}" Height="3" Margin="0,2,0,0" Stretch="Fill" Width="5"/>
                                                <Path x:Name="ForegroundIcon" Data="M0,0L2,0 1,1z" Fill="{TemplateBinding Foreground}" Height="3" Margin="0,1" Stretch="Fill" Width="5"/>
                                            </Grid>
                                        </ControlTemplate>
                                    </ContentControl.Template>
                                </ContentControl>
                                <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" Content="{TemplateBinding SelectionBoxItem}" Grid.Column="0" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </telerik:RadToggleButton>
                        <Popup x:Name="PART_Popup">
                            <Grid x:Name="PopupRoot">
                                <Border x:Name="PART_ResizeBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding MinDropDownWidth}">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="*"/>
                                        </Grid.RowDefinitions>
                                        <telerik:RadButton x:Name="PART_ClearButton" Content="{TemplateBinding ClearSelectionButtonContent}" InnerCornerRadius="0" Margin="-1,-1,-1,0" Grid.Row="0" Visibility="{TemplateBinding ClearSelectionButtonVisibility}">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                        </telerik:RadButton>
                                        <ScrollViewer x:Name="PART_ScrollViewer" BorderThickness="0" CanContentScroll="True" Foreground="{TemplateBinding Foreground}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" Padding="0,1,0,0" Grid.Row="1" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                            <ItemsPresenter/>
                                        </ScrollViewer>
                                    </Grid>
                                </Border>
                            </Grid>
                        </Popup>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="EditableTemplate">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type gi:GIComboBox}">
                    <Grid x:Name="VisualRoot">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#FF989898"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual">
                                            <LinearDoubleKeyFrame KeyTime="0:0:0.05" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverVisual">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.05">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderEnabled" Storyboard.TargetName="ButtonChrome">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <System:Boolean>False</System:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_EditableTextBox"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#FF8D8D8D"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#FFE0E0E0"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Background">
                                            <LinearDoubleKeyFrame KeyTime="0" Value="0.6"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual">
                                            <LinearDoubleKeyFrame KeyTime="0:0:0.15" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverVisual">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.15">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderActive" Storyboard.TargetName="ButtonChrome">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <System:Boolean>True</System:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual">
                                            <LinearDoubleKeyFrame KeyTime="0:0:0.115" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverVisual">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="Black"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="DropDownOpen">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                        <GradientStop Color="#FF282828"/>
                                                        <GradientStop Color="#FF5F5F5F" Offset="1"/>
                                                    </LinearGradientBrush>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual">
                                            <LinearDoubleKeyFrame KeyTime="0:0:0.05" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverVisual">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.05">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="Black"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderFocused" Storyboard.TargetName="ButtonChrome">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <System:Boolean>True</System:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.15">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="WatermarkStates">
                                <VisualState x:Name="WatermarkVisible">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Watermark">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="WatermarkInvisible"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="Background" Background="White" Grid.Column="0" CornerRadius="1,0,0,1" IsHitTestVisible="False"/>
                        <Border Background="{TemplateBinding Background}" Grid.ColumnSpan="2" CornerRadius="1" IsHitTestVisible="False" Margin="1"/>
                        <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" CornerRadius="1" IsHitTestVisible="False"/>
                        <Border x:Name="MouseOverVisual" BorderBrush="#FFFFC92B" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" CornerRadius="1" IsHitTestVisible="False" Opacity="0" Visibility="Collapsed"/>
                        <TextBox x:Name="PART_EditableTextBox" BorderBrush="Transparent" BorderThickness="0" Background="Transparent" Grid.Column="0" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsReadOnly="{TemplateBinding IsReadOnly}" Margin="1,1,0,1" Padding="{TemplateBinding Padding}" VerticalAlignment="Center" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                            <TextBox.Template>
                                <ControlTemplate TargetType="{x:Type TextBox}">
                                    <Grid>
                                        <ScrollViewer x:Name="PART_ContentHost" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" IsTabStop="False" Padding="{TemplateBinding Padding}" VerticalScrollBarVisibility="Auto" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                        </ScrollViewer>
                                    </Grid>
                                </ControlTemplate>
                            </TextBox.Template>
                        </TextBox>
                        <Border x:Name="FocusVisual" BorderBrush="#FFFFC92B" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" CornerRadius="1" IsHitTestVisible="False" Visibility="Collapsed">
                            <Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0"/>
                        </Border>
                        <telerik:RadToggleButton x:Name="PART_DropDownButton" ClickMode="Press" Grid.Column="1" IsTabStop="False" InnerCornerRadius="0" Margin="0" Padding="0">
                            <telerik:StyleManager.Theme>
                                <telerik:Office_BlackTheme/>
                            </telerik:StyleManager.Theme>
                            <telerik:RadToggleButton.Template>
                                <ControlTemplate TargetType="{x:Type telerik:RadToggleButton}">
                                    <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
                                </ControlTemplate>
                            </telerik:RadToggleButton.Template>
                            <Grid>
                                <Chromes:ButtonChrome x:Name="ButtonChrome" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0,1,1,0" RenderMouseOver="{Binding IsMouseOver, ElementName=PART_DropDownButton}" RenderPressed="{TemplateBinding IsDropDownOpen}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" RenderActive="{TemplateBinding IsMouseOver}" RenderEnabled="{TemplateBinding IsEnabled}">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme/>
                                    </telerik:StyleManager.Theme>
                                </Chromes:ButtonChrome>
                                <ContentControl x:Name="DropDownIcon" Background="White" Grid.Column="1" Foreground="Black" IsTabStop="False">
                                    <ContentControl.Template>
                                        <ControlTemplate TargetType="{x:Type ContentControl}">
                                            <Grid Margin="5,0">
                                                <Path x:Name="BackgroundIcon" Data="M0,0L2,0 1,1z" Fill="{TemplateBinding Background}" Height="3" Margin="0,2,0,0" Stretch="Fill" Width="5"/>
                                                <Path x:Name="ForegroundIcon" Data="M0,0L2,0 1,1z" Fill="{TemplateBinding Foreground}" Height="3" Margin="0,1" Stretch="Fill" Width="5"/>
                                            </Grid>
                                        </ControlTemplate>
                                    </ContentControl.Template>
                                </ContentControl>
                            </Grid>
                        </telerik:RadToggleButton>
                        <TextBlock x:Name="Watermark" HorizontalAlignment="Left" IsHitTestVisible="False" Margin="5,0,0,0" Opacity="0.5" Text="{TemplateBinding EmptyText}" Visibility="Collapsed" VerticalAlignment="Center"/>
                        <Popup x:Name="PART_Popup">
                            <Grid x:Name="PopupRoot">
                                <Border x:Name="PART_ResizeBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding MinDropDownWidth}">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="*"/>
                                        </Grid.RowDefinitions>
                                        <telerik:RadButton x:Name="PART_ClearButton" Content="{TemplateBinding ClearSelectionButtonContent}" InnerCornerRadius="0" Margin="-1,-1,-1,0" Grid.Row="0" Visibility="{TemplateBinding ClearSelectionButtonVisibility}">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                        </telerik:RadButton>
                                        <ScrollViewer x:Name="PART_ScrollViewer" BorderThickness="0" CanContentScroll="True" Foreground="{TemplateBinding Foreground}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" Padding="0,1,0,0" Grid.Row="1" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                            <ItemsPresenter/>
                                        </ScrollViewer>
                                    </Grid>
                                </Border>
                            </Grid>
                        </Popup>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="NonEditableTemplate">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type gi:GIComboBox}">
                    <Grid x:Name="VisualRoot">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Content">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#FF8D8D8D"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderEnabled" Storyboard.TargetName="ButtonChrome">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <System:Boolean>False</System:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonChrome">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="0.6"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledBorder">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderMouseOver" Storyboard.TargetName="ButtonChrome">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <System:Boolean>True</System:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="Black"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="DropDownOpen">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="Black"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border Background="{TemplateBinding Background}" CornerRadius="1" IsHitTestVisible="False"/>
                        <telerik:RadToggleButton BorderBrush="Black" x:Name="PART_DropDownButton" ClickMode="Press" Foreground="{TemplateBinding Foreground}" IsTabStop="False" InnerCornerRadius="0" Margin="0" Padding="0">
                            <telerik:StyleManager.Theme>
                                <telerik:Office_BlackTheme/>
                            </telerik:StyleManager.Theme>
                            <telerik:RadToggleButton.Template>
                                <ControlTemplate TargetType="{x:Type telerik:RadToggleButton}">
                                    <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
                                </ControlTemplate>
                            </telerik:RadToggleButton.Template>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Border x:Name="DisabledBorder" BorderBrush="#FF989898" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" CornerRadius="1" IsHitTestVisible="False" Opacity="0"/>
                                <Chromes:ButtonChrome x:Name="ButtonChrome" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" CornerRadius="1" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsDropDownOpen}" RenderFocused="{TemplateBinding IsFocused}" RenderEnabled="{TemplateBinding IsEnabled}">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme/>
                                    </telerik:StyleManager.Theme>
                                </Chromes:ButtonChrome>
                                <Border Background="{TemplateBinding Background}" Grid.ColumnSpan="2" CornerRadius="1" IsHitTestVisible="False" Margin="1"/>
                                <ContentControl x:Name="DropDownIcon" Background="White" Grid.Column="1" Foreground="Black" IsTabStop="False">
                                    <ContentControl.Template>
                                        <ControlTemplate TargetType="{x:Type ContentControl}">
                                            <Grid Margin="5,0">
                                                <Path x:Name="BackgroundIcon" Data="M0,0L2,0 1,1z" Fill="{TemplateBinding Background}" Height="3" Margin="0,2,0,0" Stretch="Fill" Width="5"/>
                                                <Path x:Name="ForegroundIcon" Data="M0,0L2,0 1,1z" Fill="{TemplateBinding Foreground}" Height="3" Margin="0,1" Stretch="Fill" Width="5"/>
                                            </Grid>
                                        </ControlTemplate>
                                    </ContentControl.Template>
                                </ContentControl>
                                <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" Content="{TemplateBinding SelectionBoxItem}" Grid.Column="0" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </telerik:RadToggleButton>
                        <Popup x:Name="PART_Popup">
                            <Grid x:Name="PopupRoot">
                                <Border x:Name="PART_ResizeBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding MinDropDownWidth}">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="*"/>
                                        </Grid.RowDefinitions>
                                        <telerik:RadButton x:Name="PART_ClearButton" Content="{TemplateBinding ClearSelectionButtonContent}" InnerCornerRadius="0" Margin="-1,-1,-1,0" Grid.Row="0" Visibility="{TemplateBinding ClearSelectionButtonVisibility}">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                        </telerik:RadButton>
                                        <ScrollViewer x:Name="PART_ScrollViewer" BorderThickness="0" CanContentScroll="True" Foreground="{TemplateBinding Foreground}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" Padding="0,1,0,0" Grid.Row="1" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                            <ItemsPresenter/>
                                        </ScrollViewer>
                                    </Grid>
                                </Border>
                            </Grid>
                        </Popup>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="MinHeight" Value="22"/>
        <Setter Property="Padding" Value="4,0"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="BorderBrush" Value="#FF848484"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Cursor" Value="Hand" />
    </Style>
 
</ResourceDictionary>

 

 

Thank you

Masha
Telerik team
 answered on 01 Mar 2016
3 answers
120 views

Just installed UI for WPF Q1 217 SP1 and received this error.

error MC3080: The property 'DataFormValidationSummary.Errors' cannot be set because it does not have an accessible set accessor.

We have been using the DataFormValidationSummary outside of the DataForm for years.  This is a serious breaking change for us.  Can you provide a work around?

Thanks in advance,

Steve

Steve
Top achievements
Rank 1
 answered on 29 Feb 2016
2 answers
344 views

Hi,

I have a GridView for a DesktopAlert. It is like the example in your demos. 

For the grouping by email received datetime I have used the same example: 

 

var dateGroupDescriptor = new Telerik.Windows.Data.GroupDescriptor<Message, DateTime, DateTime>();
 
           dateGroupDescriptor.GroupingExpression = email => email.Received.Value.Date;
           this.gridView.GroupDescriptors.Add(dateGroupDescriptor);
 
           var dateSortDescriptor = new SortDescriptor<Message, DateTime>();
           dateSortDescriptor.SortingExpression = item => item.Received.Value;
           dateSortDescriptor.SortDirection = System.ComponentModel.ListSortDirection.Descending;
           this.gridView.SortDescriptors.Add(dateSortDescriptor);

 

It works succesfull, however the format of the group header is "mm/dd/yyyy" and I need other date formart. 

How do I change the date format string?

 

Thanks!

Fernan
Top achievements
Rank 1
 answered on 29 Feb 2016
1 answer
148 views

Hi,

I would like to use RadGridView for merge cell feature. I have requirement that it should display icon along with Text which will come from database. Icons will dynamic icons based on condition. 

Can you please help me out for how to add icon in Merged cell? I have attached sample image from Telerik Demo by adding my requirement how i want it.

Thanks

Stefan
Telerik team
 answered on 29 Feb 2016
1 answer
144 views
How does Timeline Control deal with the BC date?
Dinko | Tech Support Engineer
Telerik team
 answered on 29 Feb 2016
1 answer
144 views

Hi,

is there a way to prevent the vertical weekview from showing horizontal scrollbars by narrowing the groupheaders to the available space? I also realized, that when you put a lot of appointments into one slot, this group gets more space than the others.

What I want is, that every column has the exact same width and they use only the space available in the current window without horizontal scrolling.

Thanks

Matthias

Yana
Telerik team
 answered on 29 Feb 2016
1 answer
222 views

Recently, when we enabled UI virtualization for RadTreeView in our application, our icons for the RadTreeViewItems disappeared.

We set the icons (DefaultImageSrc) in DataTrigger setters in a style, as follows:

 

<UserControl ...>
    <UserControl.Resources>
        <Style x:Key="TreeViewItemStyleBase" TargetType="{x:Type telerik:RadTreeViewItem}">
            ... 
            <Style.Triggers>
                <DataTrigger Binding="{Binding ...}">
                    <DataTrigger.Value>...</DataTrigger.Value>
                    <Setter Property="DefaultImageSrc" Value="/Our App;component/Resources/Icons/grid.png" />
                </DataTrigger>
 
                <DataTrigger Binding="{Binding ...}">
                    <DataTrigger.Value>...</DataTrigger.Value>
                    <Setter Property="DefaultImageSrc" Value="/Our App;component/Resources/Icons/bargraph.png" />
                </DataTrigger>
 
            </Style.Triggers>
        </Style>

 

        <Style TargetType="{x:Type telerik:RadTreeViewItem}" BasedOn="{StaticResource TreeViewItemStyleBase}" />
 
    </UserControl.Resources>
 
    <telerik:RadTreeView
                         IsVirtualizing="True" telerik:TreeViewPanel.VirtualizationMode="Hierarchical"
                         ... >
        ...
    </telerik:RadTreeView>
</UserControl>

 

This is with UI for WPF v. 2015.2.0401

 

It looks like this is the known bug described here and here.   That is, the problem is that DefaultImageSrc is non-functional in virtualized trees.

1) Can I get a confirmation that this bug is indeed causing our difficulty, please?  Is there anything else you see that would cause it?

2) It looks like you all have declined to fix this bug in the past.  Still declining? :)

3) I could recommend that the documentation for UI Virtualization with RadTreeView here be updated, please, to to include some very obvious notes, a) that enabling virtualization will disable DefaultImageSrc and ExpandedImageSrc (and any other TreeView features that don't work with virtualization?), and b) that workarounds are necessary.

 

Thanks!

 

-David

 

 

Petar Mladenov
Telerik team
 answered on 29 Feb 2016
6 answers
200 views

Hi! I develop Prism 6 WPF MVVM application. I defined an ObservableCollection instance in Model, please see below:

public class DeviceStatusModel
    {
        #region Constructors
        public DeviceStatusModel()
        {
            SeriesData = new ObservableCollection<short>();
            SeriesData.Add(20);
            SeriesData.Add(30);
            SeriesData.Add(50);
            SeriesData.Add(10);
            SeriesData.Add(60);
            SeriesData.Add(40);
            SeriesData.Add(20);
            SeriesData.Add(80);
        }
        #endregion

        #region Properties
        public ObservableCollection<short> SeriesData { get; set; }
        #endregion
    }

Then in ViewModel I defined the property of type of DeviceStatusModel. Please see below:

    public class DeviceStatusViewModel : BindableBase
    {
        #region Fields

        private DeviceStatusModel _deviceStatusModel;

        #endregion

        #region Constructors

        public DeviceStatusViewModel()
        {
            this.DeviceStatusModel = new DeviceStatusModel();
        }

        #endregion

        #region Properties

        public DeviceStatusModel DeviceStatusModel
        {
            get { return this._deviceStatusModel; }
            set { this.SetProperty(ref this._deviceStatusModel, value); }
        }

        #endregion
    }

Then in View I wrote the next XAML, please see below:

<UserControl x:Class="DeviceStatus.Views.DeviceStatusView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:prism="http://prismlibrary.com/"             
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"             
             prism:ViewModelLocator.AutoWireViewModel="True">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <telerik:RadCartesianChart Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Margin="6,7,0,0" VerticalAlignment="Top">
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:LinearAxis/>
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis/>
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:ScatterLineSeries ItemsSource="{Binding DeviceStatusModel.SeriesData}"/>
        </telerik:RadCartesianChart>

    </Grid>
</UserControl>

And eventually when aplication runs I see only next poor picture, please see "ChartViewScreenShot.PNG" file attached.

 

Eugene
Top achievements
Rank 1
 answered on 29 Feb 2016
1 answer
106 views

Hi!
Is there a way to _not_ enter the edit mode if the user changes the selected cell using the arrow keys or by pressing enter?
(Event if the user was in edit mode before). I want to get closer to the behavior of excel.

Alex

Stefan
Telerik team
 answered on 29 Feb 2016
4 answers
178 views
I'm experiencing an issue with the RadRibbonDropDownButton control where the DropDownContent is a ListBox with keyboard based navigation. I open the dropdown via the access key text, then use the arrow keys to select an item in the listbox, but when I press enter, nothing happens until I press another arrow key (or escape). At this point, the popup closes, but if I pressed an arrow key, it moves the selection prior to closing the popup. I'm not sure if I'm doing something wrong in my use of the control, or if this is a bug. Anyone have any experience with this?
Ivan
Telerik team
 answered on 29 Feb 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?