OutlookBar minimized icon issue

4 posts, 0 answers
  1. Mudasser
    Mudasser avatar
    2 posts
    Member since:
    Sep 2008

    Posted 05 Oct 2015 Link to this post

    The Click Event of any minimized icon does not render the correct screen if any icon is collapsed between minimized icons.
    Kindly find the ​attached sample project.

    If you run the project, it will show you 5 icon ​as minimized icon. and when you click any minimized icon it will work fine. But you Collapsed the last RadOutlookBarItem and run the project then it will show you 4 icon ​as minimized icon.and if you click any it will not render/open the correct one. it is always opening the first one.This is issue is occurring on Telrik Version14.

    In my project, i am dynamically ,showing and hide the outlookbar according to configuration but Click Event of any minimized icon does not render the correct screen if any icon is collapsed between minimized icons.

    Kindly explain, why it is not working properly as it suppose to be. and what is the possible solution.

     

     

    following is the code for sample project

     

    <Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
    xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
            MaxHeight="400"
    Title="Window1">
    <Grid>
    <!--************* OUTLOOK BAR *************-->
    <telerikNavigation:RadOutlookBar x:Name="outlookBar" Width="250" HorizontalAlignment="Left" Margin="0,100,0,0">
    <!--****** MAIL ******-->
    <telerikNavigation:RadOutlookBarItem Header="Mail" FontWeight="Bold"
    Icon="Images/mailBig.png" SmallIcon="Images/mailSmall.png" Tag="Mail">
    <telerikNavigation:RadTreeView IsLineEnabled="True" x:Name="foldersTreeView">
    <telerikNavigation:RadTreeViewItem Header="Personal Folders"
    DefaultImageSrc="Images/1PersonalFolders.png" IsExpanded="True">
    <telerikNavigation:RadTreeViewItem Header="Deleted Items"
    DefaultImageSrc="Images/2DeletedItems.png" />
    <telerikNavigation:RadTreeViewItem Header="Drafts"
    DefaultImageSrc="Images/3Drafts.png" />
    <telerikNavigation:RadTreeViewItem x:Name="MessagesTreeView"
    Header="Inbox(3)" DefaultImageSrc="Images/4Inbox.png"
    IsExpanded="True">
    <telerikNavigation:RadTreeViewItem.ItemTemplate>
    <DataTemplate>
    <StackPanel Orientation="Horizontal">
    <Image Source="Images/letter.png" />
    <TextBlock Text="{Binding From}" Margin="9 0 0 0" />
    </StackPanel>
    </DataTemplate>
    </telerikNavigation:RadTreeViewItem.ItemTemplate>
    </telerikNavigation:RadTreeViewItem>
    <telerikNavigation:RadTreeViewItem Header="Junk E-mails"
    DefaultImageSrc="Images/junk.png" />
    <telerikNavigation:RadTreeViewItem Header="Outbox"
    DefaultImageSrc="Images/outbox.png" />
    <telerikNavigation:RadTreeViewItem Header="Sent Items"
    DefaultImageSrc="Images/sent.png" />
    </telerikNavigation:RadTreeViewItem>
    </telerikNavigation:RadTreeView>
    </telerikNavigation:RadOutlookBarItem>
    <!--********** CALENDAR **********-->
    <telerikNavigation:RadOutlookBarItem Header="Calendar" FontWeight="Bold"
    Icon="Images/calendarBig.png" SmallIcon="Images/calendarSmall.png">
    <telerikInput:RadCalendar VerticalAlignment="Top" Margin="3" />
    </telerikNavigation:RadOutlookBarItem>
    <!--**********  CONTACTS **********-->
    <telerikNavigation:RadOutlookBarItem Header="Contacts" FontWeight="Bold"
    Icon="Images/contactsBig.png" SmallIcon="Images/contactsSmall.png"
    Tag="Contacts">
    <ListBox x:Name="ContactsListBox" BorderBrush="{x:Null}" BorderThickness="0">
    <ListBox.ItemTemplate>
    <DataTemplate>
    <StackPanel Orientation="Horizontal" Margin="14 0 14 0">
    <Image Source="Images/contact.png" />
    <TextBlock Text="{Binding FirstName}" Margin="10 0 0 0"
    VerticalAlignment="Center" />
    <TextBlock Text="{Binding LastName}" Margin="2 0 0 0"
    VerticalAlignment="Center" />
    </StackPanel>
    </DataTemplate>
    </ListBox.ItemTemplate>
    </ListBox>
    </telerikNavigation:RadOutlookBarItem>
    <!--******* TASKS *******-->
    <telerikNavigation:RadOutlookBarItem Header="Tasks" FontWeight="Bold"
    Icon="Images/tasksBig.png" SmallIcon="Images/tasksSmall.png">
    <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left" Margin="15 5">
    <RadioButton Content="To-Do List" IsChecked="True" Margin="0 5 0 5" />
    <RadioButton Content="Simple List" Margin="0 5 0 5" />
    <RadioButton Content="Detailed List" Margin="0 5 0 5" />
    <RadioButton Content="Active Tasks" Margin="0 5 0 5" />
    <RadioButton Content="Next Seven Days" Margin="0 5 0 5" />
    <RadioButton Content="Overdue Tasks" Margin="0 5 0 5" />
    </StackPanel>
    </telerikNavigation:RadOutlookBarItem>
    <!--******* NOTES *******-->
    <telerikNavigation:RadOutlookBarItem Header="Notes" FontWeight="Bold"
    Icon="Images/notesBig.png" SmallIcon="Images/notesSmall.png">
    <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left" Margin="15 5">
    <RadioButton Content="Icons" IsChecked="True" Margin="0 5 0 5" />
    <RadioButton Content="Notes List" Margin="0 5 0 5" />
    <RadioButton Content="Last Seven Days" Margin="0 5 0 5" />
    <RadioButton Content="By Category" Margin="0 5 0 5" />
    <RadioButton Content="Outlook Data Files" Margin="0 5 0 5" />
    <RadioButton Content="Overdue Tasks" Margin="0 5 0 5" />
    </StackPanel>
    </telerikNavigation:RadOutlookBarItem>
    <!--************* FOLDER LIST *************-->
    <telerikNavigation:RadOutlookBarItem Header="Folder List" FontWeight="Bold"
    Icon="Images/foldersBig.png" SmallIcon="Images/foldersSmall.png">
    <telerikNavigation:RadTreeView IsLineEnabled="True">
    <telerikNavigation:RadTreeViewItem Header="Personal Folders"
    DefaultImageSrc="Images/1PersonalFolders.png" IsExpanded="True">
    <telerikNavigation:RadTreeViewItem Header="Deleted Items"
    DefaultImageSrc="Images/2DeletedItems.png" />
    <telerikNavigation:RadTreeViewItem Header="Drafts"
    DefaultImageSrc="Images/3Drafts.png" />
    <telerikNavigation:RadTreeViewItem Header="Inbox"
    DefaultImageSrc="Images/4Inbox.png" />
    <telerikNavigation:RadTreeViewItem Header="Junk E-mails"
    DefaultImageSrc="Images/junk.png" />
    <telerikNavigation:RadTreeViewItem Header="Outbox"
    DefaultImageSrc="Images/outbox.png" />
    <telerikNavigation:RadTreeViewItem Header="Sent Items"
    DefaultImageSrc="Images/sent.png" />
    </telerikNavigation:RadTreeViewItem>
    </telerikNavigation:RadTreeView>
    </telerikNavigation:RadOutlookBarItem>
    <!--*********** SHORTCUTS ***********-->
    <telerikNavigation:RadOutlookBarItem Header="Shortcuts" FontWeight="Bold"
    Icon="Images/shortcutsBig.png" SmallIcon="Images/shortcutsSmall.png">
    <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left" Margin="15 5">
    <Button Content="Add New Group" />
    <Button Content="Add New Shortcut" />
    </StackPanel>
    </telerikNavigation:RadOutlookBarItem>

                <telerikNavigation:RadOutlookBarItem Header="Events" FontWeight="Bold"
    Icon="Images/shortcutsBig.png" SmallIcon="Images/notesSmall.png">
                    <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left" Margin="15 5">
                        <Button Content="Add New Events" />
                        
                    </StackPanel>
                </telerikNavigation:RadOutlookBarItem>


                <telerikNavigation:RadOutlookBarItem Header="Reminder" FontWeight="Bold"
    Icon="Images/shortcutsBig.png" SmallIcon="Images/shortcutsSmall.png" Visibility="Collapsed">
                    <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left" Margin="15 5">
                        <Button Content="Add New Reminder" />
                        
                    </StackPanel>
                </telerikNavigation:RadOutlookBarItem>
                
            </telerikNavigation:RadOutlookBar>
    </Grid>
    </Window>

     

     

     

    Thanks

    Regards

    Mudasser

     

     

     

     

     

  2. Dinko
    Admin
    Dinko avatar
    201 posts

    Posted 06 Oct 2015 Link to this post

    Hello Mudasser,

    This is an issue in RadOutlookBar and therefore I logged it in our Feedback portal, where you can track its status. At the moment we can't give you a workaround but if you follow the item you will get a notification when the issue's status is updated. It is basically caused due to the fact that when setting the Visibility to Collapsed and you select a minimized item the control doesn't get the correct item index. I also updated your Telerik points for bringing this issue to our attention.

    Please excuse us for any inconvenience caused.

    Regards,
    Dinko
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. Mudasser
    Mudasser avatar
    2 posts
    Member since:
    Sep 2008

    Posted 15 Oct 2015 in reply to Dinko Link to this post

    Hello,

           Is there any way that in outlookbar instead of showing minimized icon ,it show the scrollbar if no of outlookbaritems increase.By showing the scrollbar i can avoid the above mention issue.

    Kindly update me.

     

     

    Thanks

    Regards

    Mudasser

     

  5. Dinko
    Admin
    Dinko avatar
    201 posts

    Posted 20 Oct 2015 Link to this post

    Hi Mudasser,

    You can achieve this by editing the default Style or Template of the control. This approach is further described in the Editing Control Templates tutorial. Basically you can replace the ItemsPresentar tag to StackPanel and set its IsItemsHost property to true and wrap it in ScrollViewer element. You can see this approach in the code snipped below:

    <ScrollViewer  DockPanel.Dock="Bottom" 
                                  ScrollViewer.VerticalScrollBarVisibility="Auto"
                  Height="100">
            <StackPanel  IsItemsHost="true" Margin="1"/>
    </ScrollViewer>
    Also we have created sample project which demonstrates this behavior using your code.

    If this is not the solution you are looking for, please don't hesitate to contact us again.

    Regards,
    Dinko
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top