Ribbon Button with System.Windows.Shapes.Line - Ribbon for WPF Forum

Posted 14 years ago by Andy Fouse

Version: 9.1.0507

We are trying to use System.Windows.Shapes.Line with a Ribbon Button to imitate MS Office functionality. To create the functionality we are looking for, follow these steps:

1. Open MS PowerPoint 2007
2. Insert a Shape
3. On the Format Tab, click the Shape Outline Dropdown, then navigate down to Dashes … the Ribbon Button that shows the different line styles is what we are trying to recreate.

I can get this to work with a Combo Box, but this isn't quite what we are looking for because all the options are not shown in the Combo Box, it only shows one at a time with your selection.

Below is the code snipbit i am using to make the Combo Box functionality work. The Static Resources in the code below are created using the System.Windows.Shapes.Line.

 <Line x:Key="_Solid" Height="16" Tag="Solid" StrokeThickness="3" Stroke="Black" X1="0" Y1="8" X2="70" Y2="8" x:Uid="Line_2" />
        <Line x:Key="_Dash" Height="16" Tag="Dash"  StrokeThickness="3" Stroke="Black" X1="0" Y1="8" X2="70" Y2="8" StrokeDashArray="2,2,2,2" x:Uid="Line_3" />
        <Line x:Key="_DashDot" Height="16" Tag="DashDot" StrokeThickness="3" Stroke="Black" X1="0" Y1="8" X2="70" Y2="8" StrokeDashArray=".2,2,2,2" x:Uid="Line_4" />
        <Line x:Key="_Dot" Height="16" Tag="Dot" StrokeThickness="3" Stroke="Black" X1="0" Y1="8" X2="70" Y2="8" StrokeDashArray="0.2, 2" x:Uid="Line_5" />
        <Line x:Key="_DashDotDot" Tag="DashDotDot" Height="16" StrokeThickness="3" Stroke="Black" X1="0" Y1="8" X2="70" Y2="8" StrokeDashArray="0.2,2,0.2,2,2,2" x:Uid="Line_6" />

 <ribbon:PopupButton Label="Dashes">
                                                <ribbon:ComboBox HorizontalAlignment="Center" Command="{StaticResource ApplyLineTypeCommand}" IsPreviewEnabled="False" >
                                                    <ribbon:ComboBox.ItemsSource>
                                                        <x:Array Type="{x:Type Controls:QCComboBoxItem}">
                                                            <Controls:QCComboBoxItem Content="{StaticResource _Solid}"/>
                                                            <Controls:QCComboBoxItem Content="{StaticResource _Dash}"/>
                                                            <Controls:QCComboBoxItem Content="{StaticResource _DashDot}"/>
                                                            <Controls:QCComboBoxItem Content="{StaticResource _Dot}"/>
                                                            <Controls:QCComboBoxItem Content="{StaticResource _DashDotDot}"/>
                                                        </x:Array>
                                                    </ribbon:ComboBox.ItemsSource>
                                                </ribbon:ComboBox>
                                                </ribbon:PopupButton>

Any thoughts / suggestions for how we get this to work properly?

Comments (9)

Posted 14 years ago by Actipro Software Support - Cleveland, OH, USA

Actually those lines are a gallery. Take a look at our "Gallery with Custom Draw Items" QuickStart since that shows a very similar implementation.

Actipro Software Support

Posted 14 years ago by Andy Fouse

Using the Gallery, we can now draw the lines properly.

We want this gallery to be hooked-up to a ribbon command which then executes (ApplyLineTypeCommand). However, in our command, the ObjectValueCommandParameter's value is always null.

Any thoughts on how to get a value of the selected item?

<ribbon:PopupButton Label="Dashes">
                                                <ribbon:PopupGallery UseSingleColumn="True" Command="{StaticResource ApplyLineTypeCommand}" >
                                                     <ribbon:PopupGallery.ItemsSource>
                                                        <x:Array Type="{x:Type ribbon:GalleryItem}">
                                                            <ribbon:GalleryItem Content="{StaticResource _Solid}"/>
                                                            <ribbon:GalleryItem Content="{StaticResource _Dash}"/>
                                                            <ribbon:GalleryItem Content="{StaticResource _DashDot}"/>
                                                            <ribbon:GalleryItem Content="{StaticResource _Dot}"/>
                                                            <ribbon:GalleryItem Content="{StaticResource _DashDotDot}"/>
                                                        </x:Array>
                                                    </ribbon:PopupGallery.ItemsSource>
                                                </ribbon:PopupGallery>
                                            </ribbon:PopupButton>

Posted 14 years ago by Actipro Software Support - Cleveland, OH, USA

If you specify GalleryItems like that, you need to set the DataContext property of the GalleryItem to the data value that you wish to pass to the command handler. So you could do this for instance:

<ribbon:GalleryItem DataContext="Solid" Content="{StaticResource _Solid}"/>

Actipro Software Support

Posted 14 years ago by Andy Fouse

Thanks...using the DataContext did the trick.

Now i have one final question. Is there a way to add a label to each line? So i looks like the picture in the original thread?

Thanks in Advance

Andy

Posted 14 years ago by Actipro Software Support - Cleveland, OH, USA

Andy,

Do you have a screenshot of what you mean? I didn't see any screens linked to in your original post.

Actipro Software Support

Posted 14 years ago by Andy Fouse

I got this to work using your example for Gallery with Custom Draw as you suggested, by switching from underline style to line width. Using the CustomDrawElement and Render Class, I can now get this to work in XP. But in Vista and Windows 7, the combo box is not updating based on the user selection. I think this is a problem with the Renderer and Themes.

When used in this context, it seems to work fine for all operating systems:

<ribbon:PopupButton Label="Weight" KeyTipAccessText="W" PopupResizeMode="Vertical" IsEnabled="True" >
      <StackPanel>
         <ribbon:PopupGallery UseSingleColumn="True" Command="{StaticResource ApplyLineSizeCommand}" ItemsSource="{Binding Source={StaticResource LineSizeObjectDataProvider}}">
             <ribbon:PopupGallery.ItemTemplate>
                 <DataTemplate>
                    <shared:CustomDrawElement Width="150" Height="20" CustomDraw="OnCustomLineSizeGalleryItems" />
                 </DataTemplate>
             </ribbon:PopupGallery.ItemTemplate>
        </ribbon:PopupGallery>

The example belows shows the ComboBox in which it doesn't work for Vista/XP:

   <Controls:QCComboBox.ItemTemplate>
                    <DataTemplate x:Uid="DataTemplate_3">
                        <shared:CustomDrawElement Width="150" Height="20" CustomDraw="OnCustomLineSizeGalleryItems" x:Uid="shared:CustomDrawElement_1" />
                    </DataTemplate>
                    </Controls:QCComboBox.ItemTemplate>
                </Controls:QCComboBox>

When i try to use this as part of a combo box, the updated value from the user selection doesn't work in Vista or Windows 7, but works fine in XP. When I change the theme of the Vista machine to use Windows Classic (XP Theme), things work fine again.

Any thoughts?

Posted 14 years ago by Actipro Software Support - Cleveland, OH, USA

Hi Andy,

Not sure offhand. Please make a simple sample project that shows the issue and email it over. We'll run it in Windows 7 to see what is happening. Thanks.

Actipro Software Support

Posted 14 years ago by Andy Fouse

I emailed a sample file. Wasn't sure how to attach it to this forum post.

Email was sent to "Actipro Software Support Forums" - newsletter@actiprosoftware.com

Not sure this is the proper email address, but this was the "Reply To" address from my last post response.

Andy

Posted 14 years ago by Actipro Software Support - Cleveland, OH, USA

Andy,

The problem with your ComboBox in the sample you sent is that while the DataContext does get updated on the selected item's ItemTemplate, this doesn't trigger a repaint in CustomDrawElement.

If you add this class and use it instead in your ComboBox then it works:

public class MyCustomDrawElement : CustomDrawElement {
    static MyCustomDrawElement() {
        FrameworkElement.DataContextProperty.OverrideMetadata(typeof(MyCustomDrawElement), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender));
    }
}

Actipro Software Support

The latest build of this product (v24.1.2) was released 10 days ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.