Geek Answers Handbook

WPF Ribbon: DataTemplate Causes BindingExpression Path Error

I am having a little problem using WPF RibbonControl (October 2010 version). My idea was to associate the ItemsSource RibbonGroup property with my view model and use the DataTemplate to create RibbonButtons as needed. This works, but when the window is displayed, it causes a binding error (one for each button):

System.Windows.Data Error: 40 : BindingExpression path error: 'IsDropDownOpen' property not found on 'object' ''RibbonContentPresenter' (Name='PART_ContentPresenter')'. BindingExpression:Path=IsDropDownOpen; DataItem='RibbonContentPresenter' (Name='PART_ContentPresenter'); target element is 'RibbonButton' (Name=''); target property is 'NoTarget' (type 'Object')

Here is a piece of code, the viewmodel is replaced with an array of strings, but the problem is the same:

<ribbon:RibbonWindow x:Class="WpfRibbonApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow" x:Name="RibbonWindow" Width="640" Height="480" >

    <ribbon:RibbonWindow.Resources>
        <x:Array x:Key="buttonArray" Type="sys:String">
            <sys:String>Button 1</sys:String>
            <sys:String>Button 2</sys:String>
            <sys:String>Button 3</sys:String>
            <sys:String>Button 4</sys:String>
            <sys:String>Button 5</sys:String>
            <sys:String>Button 6</sys:String>
        </x:Array>
        <DataTemplate x:Key="buttonTemplate">
            <ribbon:RibbonButton Label="{Binding}"  />
        </DataTemplate>        
    </ribbon:RibbonWindow.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <ribbon:Ribbon>
            <ribbon:RibbonTab Header="Tab1">
                <ribbon:RibbonGroup Header="Group1"
                    ItemsSource="{StaticResource buttonArray}" 
                    ItemTemplate="{StaticResource buttonTemplate}"
                />
            </ribbon:RibbonTab>
        </ribbon:Ribbon>         
    </Grid>
</ribbon:RibbonWindow>

Again, it works, but the binding error is a little annoying. Is there any way to get rid of it?

+5
source share
2 answers

RibbonButton RibbonControlsLibrary. MultiDataTrigger , RibbonButton , RibbonSplitButton.

<MultiDataTrigger>
    <MultiDataTrigger.Conditions>
        <Condition Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropDownOpen}" Value="True" />
        <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsEnabled}" Value="False" />
        <Condition Binding="{Binding Path=HighContrast, Source={x:Static shell:SystemParameters2.Current}}" Value="True" />
    </MultiDataTrigger.Conditions>
    <Setter TargetName="OuterBorder" Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
</MultiDataTrigger>
+3

Stylled the RibbonButton ControlTemplate MultiDataTrigger, : .

<ribbon:RibbonWindow.Resources>

    <ControlTemplate x:Key="RibbonButtonTemplate" TargetType="{x:Type ribbon:RibbonButton}">
        <Grid x:Name="MainGrid" SnapsToDevicePixels="True">

            <Border x:Name="OuterBorder"
                CornerRadius="{TemplateBinding CornerRadius}"
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}" 
                Margin="1,1,1,1"/>

            <Border x:Name="MiddleBorder"
                CornerRadius="{TemplateBinding CornerRadius}"
                Background="Transparent"
                BorderBrush="Transparent"
                BorderThickness="{TemplateBinding BorderThickness}" >
                <Border x:Name="InnerBorder"
                    Background="Transparent"
                    BorderBrush="Transparent"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Padding="{TemplateBinding Padding}"
                    CornerRadius="{TemplateBinding CornerRadius}">
                    <StackPanel x:Name="StackPanel"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

                        <Image x:Name="PART_Image"
                           Source="{TemplateBinding LargeImageSource}"
                           Margin="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type ribbon:Ribbon}, 
                            ResourceId=LargeImageMargin}}"
                           RenderOptions.BitmapScalingMode="NearestNeighbor"
                           VerticalAlignment="Center"
                           HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />

                        <Grid x:Name="GridText"
                          VerticalAlignment="Center"
                          HorizontalAlignment="Center">

                            <ribbon:RibbonTwoLineText x:Name="TwoLineText"
                                    Text="{TemplateBinding Label}"
                                    TextAlignment="Center"
                                    VerticalAlignment="Top"
                                    HorizontalAlignment="Center"
                                    LineHeight="13px"
                                    LineStackingStrategy="BlockLineHeight"
                                    HasTwoLines="{TemplateBinding ribbon:RibbonTwoLineText.HasTwoLines}"
                                    PathData="{TemplateBinding ribbon:RibbonTwoLineText.PathData}"
                                    PathFill="{TemplateBinding Foreground}"
                                    Margin="1,1,1,0" />
                        </Grid>
                    </StackPanel>
                </Border>
            </Border>


        </Grid>

        <ControlTemplate.Triggers>

            <!-- Large Variant -->
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=ControlSizeDefinition.ImageSize}" Value="Large">
                <Setter Property="MinWidth" Value="44"/>
                <Setter Property="Height" Value="66"/>
                <Setter TargetName="GridText" Property="MinHeight" Value="26" />
                <Setter TargetName="TwoLineText" Property="HasTwoLines" Value="True" />
            </DataTrigger>

            <!-- Medium or Small Variant -->
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=ControlSizeDefinition.ImageSize}" Value="Small">
                <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SmallImageSource}"/>
                <Setter TargetName="StackPanel" Property="HorizontalAlignment" Value="Left" />

                <Setter TargetName="PART_Image" Property="Margin" Value="2,2,2,2" />
                <Setter TargetName="PART_Image" Property="Source" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SmallImageSource}" />
                <Setter TargetName="PART_Image" Property="Width" Value="16" />
                <Setter TargetName="PART_Image" Property="Height" Value="16" />
                <Setter TargetName="PART_Image" Property="HorizontalAlignment" Value="Left" />

                <Setter TargetName="TwoLineText" Property="HorizontalAlignment" Value="Left" />
                <Setter TargetName="TwoLineText" Property="Margin" Value="1" />
                <Setter TargetName="StackPanel" Property="Orientation" Value="Horizontal" />
            </DataTrigger>


            <!-- IsMouseOver -->
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="OuterBorder" Property="Background" 
                        Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MouseOverBackground}" />
                <Setter TargetName="OuterBorder" Property="BorderBrush" 
                        Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MouseOverBorderBrush}" />
                <Setter TargetName="InnerBorder" Property="BorderBrush"
                        Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FocusedBorderBrush}" />
            </Trigger>

            <!-- IsFocused -->
            <Trigger Property="IsKeyboardFocused" Value="True">
                <Setter TargetName="OuterBorder" Property="Background" 
                        Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FocusedBackground}" />
                <Setter TargetName="OuterBorder" Property="BorderBrush" 
                        Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FocusedBorderBrush}" />
                <Setter TargetName="InnerBorder" Property="BorderBrush" 
                        Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FocusedBorderBrush}"/>
            </Trigger>

        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style x:Key="RibbonButtonStyle" TargetType="{x:Type ribbon:RibbonButton}" >
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="CornerRadius" Value="2" />
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="MouseOverBorderBrush" Value="{Binding RelativeSource={RelativeSource Self},Path=Ribbon.MouseOverBorderBrush}" />
        <Setter Property="MouseOverBackground" Value="{Binding RelativeSource={RelativeSource Self},Path=Ribbon.MouseOverBackground}" />
        <Setter Property="PressedBorderBrush" Value="{Binding RelativeSource={RelativeSource Self},Path=Ribbon.PressedBorderBrush}" />
        <Setter Property="PressedBackground" Value="{Binding RelativeSource={RelativeSource Self},Path=Ribbon.PressedBackground}" />
        <Setter Property="FocusedBorderBrush" Value="{Binding RelativeSource={RelativeSource Self},Path=Ribbon.FocusedBorderBrush}" />
        <Setter Property="FocusedBackground" Value="{Binding RelativeSource={RelativeSource Self},Path=Ribbon.FocusedBackground}" />
        <Setter Property="Template" Value="{StaticResource RibbonButtonTemplate}" />
        <Setter Property="QuickAccessToolBarControlSizeDefinition">
            <Setter.Value>
                <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
            </Setter.Value>
        </Setter>

    </Style>

    <x:Array x:Key="buttonArray" Type="sys:String">
        <sys:String>Button 1</sys:String>
        <sys:String>Button 2</sys:String>
        <sys:String>Button 3</sys:String>
        <sys:String>Button 4</sys:String>
        <sys:String>Button 5</sys:String>
        <sys:String>Button 6</sys:String>
    </x:Array>
    <DataTemplate x:Key="buttonTemplate">
        <ribbon:RibbonButton Label="{Binding}" 
                             Style="{StaticResource ResourceKey=RibbonButtonStyle}" />
    </DataTemplate>


</ribbon:RibbonWindow.Resources>
+1

More articles:


All Articles