PanelBar hierarchical DataBinding with Disabeld and Color binded

3 posts, 1 answers
  1. Benedikt
    Benedikt avatar
    39 posts
    Member since:
    Feb 2018

    Posted 23 Sep 2019 Link to this post

    Hello together,

    I have previously a long peace of code to make a listview bound to a Datasource with all calendar weeks in a range. On Click on first level a listview was loaded under the clicked week with all dates in this week. The color of each week or day was based on the 'Farbe'. A calculated property based on plan and reality.

    If the day was completely set to 0 plan, it was disabled, so it could'nt be cklicked anymore.

     

    I now wanted to achieve the same, maybe simplier with a PanelBar. But I have to problem, I don't get the color and disable to work.
    I have seta hierarchical dataTemplate as Itemtemplate and of course set the Itemsource in Code behind.

    The Problem is, if I set the color of a Stackpanel or something else in the Template the color not affects the background of the expander and everything else.

    I tried to set a PanelBarItem as Template but there I have a visual and clickable second object in my normal Item, plus the background not affects anything.

    I then a project where someone set ItemCOntainerStyle and ItemStyle, but if I do this my whole PanelBar is empty.

     

    Here is my old listview:

     

            <ListView

                Grid.Column="0"
                Grid.Row="1"
                Name="lvWochen"
                Background="{DynamicResource MaterialDesignPaper}"
                IsSynchronizedWithCurrentItem="True"
                SelectedValuePath="KWJahr"
                BorderThickness="0"
                >
                <ListView.ItemContainerStyle>
                    <Style 
                        TargetType="ListViewItem"
                        >
                        <Setter 
                            Property="Background" 
                            Value="Transparent" 
                            />
                        <Setter
                            Property="Margin"
                            Value="5 2 5 2"
                            />
                        <Setter 
                            Property="Template"
                            >
                            <Setter.Value>
                                <ControlTemplate 
                                    TargetType="ListViewItem"
                                    >
                                    <materialDesign:Card
                                        Foreground="{DynamicResource MaterialDesignBody}"
                                        Margin="2,5,2,0"
                                        MouseDown="lvWochen_MouseDown"
                                        >
                                        <materialDesign:Card.Style>
                                            <Style 
                                                BasedOn="{StaticResource CardCustom}"  
                                                TargetType="{x:Type materialDesign:Card}"
                                                >
                                            </Style>
                                        </materialDesign:Card.Style>
                                        <materialDesign:Card.Background>
                                            <Binding 
                                                Path="Farbe"
                                                />
                                        </materialDesign:Card.Background>
                                        <Border
                                            BorderThickness="2"
                                            BorderBrush="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataContext.BorderColor}"
                                            >
                                            <StackPanel
                                                Margin="3,3,3,3"
                                                >
                                                <Grid>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="100*"/>
                                                        <ColumnDefinition Width="Auto"/>
                                                        <ColumnDefinition Width="Auto"/>
                                                    </Grid.ColumnDefinitions>
                                                    <Grid
                                                        Grid.Column="0"
                                                        >
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="40*"/>
                                                            <ColumnDefinition Width="60*"/>
                                                        </Grid.ColumnDefinitions>
                                                        <Grid.RowDefinitions>
                                                            <RowDefinition Height="Auto"/>
                                                            <RowDefinition Height="Auto"/>
                                                            <RowDefinition Height="Auto"/>
                                                            <RowDefinition Height="Auto"/>
                                                        </Grid.RowDefinitions>
                                                        <TextBlock
                                                            Grid.Column="0"
                                                            Grid.Row="0"
                                                            FontSize="{StaticResource Body}" 
                                                            FontWeight="Medium" 
                                                            >
                                                            <TextBlock.Text>
                                                                <MultiBinding 
                                                                    StringFormat="{}KW {0} Jahr {1}"
                                                                    >
                                                                    <Binding 
                                                                        Path="KW"
                                                                        />
                                                                    <Binding 
                                                                        Path="Jahr"
                                                                        />
                                                                </MultiBinding>
                                                            </TextBlock.Text>
                                                        </TextBlock>
                                                        <TextBlock
                                                            Grid.Column="0"
                                                            Grid.Row="1"
                                                            FontSize="{StaticResource Caption}" 
                                                            FontWeight="Regular"
                                                            >
                                                            <TextBlock.Text>
                                                                <MultiBinding 
                                                                    StringFormat="{}{0:dd.MM.yy} - {1:dd.MM.yy}"
                                                                    >
                                                                    <Binding 
                                                                        Path="MinDatum"
                                                                        />
                                                                    <Binding 
                                                                        Path="MaxDatum"
                                                                        />
                                                                </MultiBinding>
                                                            </TextBlock.Text>
                                                        </TextBlock>
                                                        <Grid
                                                            Grid.Column="1"
                                                            Grid.Row="1"
                                                            >
                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition Width="50*"/>
                                                                <ColumnDefinition Width="50*"/>
                                                            </Grid.ColumnDefinitions>
                                                            <TextBlock
                                                                Grid.Column="0"
                                                                FontSize="{StaticResource Body}" 
                                                                FontWeight="Regular"
                                                                Visibility="{Binding Path=AufwandEMVisibility}"
                                                                HorizontalAlignment="Left"
                                                                Margin="5,0,0,0"
                                                                >
                                                                <TextBlock.Text>
                                                                    <MultiBinding 
                                                                        StringFormat="{}Aufwand EM: {0:#,0}"
                                                                        >
                                                                        <Binding 
                                                                            Path="AufwandEM"
                                                                            />
                                                                    </MultiBinding>
                                                                </TextBlock.Text>
                                                            </TextBlock>
                                                            <TextBlock
                                                                Grid.Column="1"
                                                                FontSize="{StaticResource Body}" 
                                                                FontWeight="Regular"
                                                                Visibility="{Binding Path=AufwandEMVisibility}"
                                                                HorizontalAlignment="Left"
                                                                Margin="5,0,0,0"
                                                                >
                                                                <TextBlock.Text>
                                                                    <MultiBinding 
                                                                        StringFormat="{}Einzelteile: {0}"
                                                                        >
                                                                        <Binding 
                                                                            Path="Einzelteile"
                                                                            />
                                                                    </MultiBinding>
                                                                </TextBlock.Text>
                                                            </TextBlock>
                                                        </Grid>
                                                        <Grid
                                                            Grid.Column="1"
                                                            Grid.Row="0"
                                                            >
                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition Width="50*"/>
                                                                <ColumnDefinition Width="50*"/>
                                                            </Grid.ColumnDefinitions>
                                                            <TextBlock
                                                                Grid.Column="0"
                                                                Text="{Binding Path=PlanZellen, StringFormat={}Planzellen: {0}}"
                                                                FontSize="{StaticResource Body}" 
                                                                FontWeight="Medium" 
                                                                HorizontalAlignment="Left"
                                                                Margin="5,0,0,0"
                                                                >
                                                            </TextBlock>
                                                            <TextBlock
                                                                Grid.Column="1"
                                                                FontSize="{StaticResource Body}" 
                                                                FontWeight="Medium"
                                                                HorizontalAlignment="Left"
                                                                Margin="5,0,0,0"
                                                                >
                                                                <TextBlock.Text>
                                                                    <MultiBinding 
                                                                        StringFormat="{}{0}: {1}"
                                                                        >
                                                                        <Binding 
                                                                            Path="ZellenArt"
                                                                            />
                                                                        <Binding 
                                                                            Path="Zellen"
                                                                            />
                                                                    </MultiBinding>
                                                                </TextBlock.Text>
                                                            </TextBlock>
                                                        </Grid>
                                                        <Grid
                                                            Grid.Row="2"
                                                            Grid.Column="0"
                                                            Grid.ColumnSpan="2"
                                                            Margin="5,0,0,0"
                                                            >
                                                            <TextBlock
                                                                Grid.Column="0"
                                                                Text="{Binding Path=Einträge, StringFormat={}Einträge: {0}}"
                                                                FontSize="{StaticResource Caption}" 
                                                                FontWeight="Regular" 
                                                                HorizontalAlignment="Center"
                                                                >
                                                            </TextBlock>
                                                        </Grid>
                                                    </Grid>
                                                    <materialDesign:PackIcon 
                                                        Grid.Column="2"
                                                        Kind="CheckAll" 
                                                        Visibility="{Binding Path=FertigAVVisibility}"
                                                        VerticalAlignment="Center"
                                                        Foreground="#1B5E20"
                                                        />
                                                    <ToggleButton
                                                        Grid.Column="1"
                                                        VerticalAlignment="Center"
                                                        Style="{StaticResource MaterialDesignActionToggleButton}"
                                                        Background="Transparent"
                                                        Click="ToggleButton_Click"
                                                        IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataContext.IsExpanded, Mode=OneWay}"
                                                        >
                                                        <ToggleButton.Content>
                                                            <materialDesign:PackIcon
                                                                Kind="ChevronDown" 
                                                                />
                                                        </ToggleButton.Content>
                                                        <materialDesign:ToggleButtonAssist.OnContent>
                                                            <materialDesign:PackIcon
                                                                Kind="ChevronUp" 
                                                                />
                                                        </materialDesign:ToggleButtonAssist.OnContent>
                                                    </ToggleButton>
                                                </Grid>
                                                <ListView
                                                    Name="lvTage"
                                                    Background="Transparent"
                                                    IsSynchronizedWithCurrentItem="True"
                                                    SelectedValuePath="DatumD"
                                                    BorderThickness="0"
                                                    PreviewMouseWheel="lvTage_PreviewMouseWheel"
                                                    ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataContext.TageDatas}"
                                                    Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataContext.TagVisible}"
                                                    >
                                                    <ListView.ItemContainerStyle>
                                                        <Style 
                                                            TargetType="ListViewItem"
                                                            >
                                                            <Setter Property="LayoutTransform">
                                                                <Setter.Value>
                                                                    <ScaleTransform x:Name="transform" />
                                                                </Setter.Value>
                                                            </Setter>
                                                            <Setter 
                                                                Property="Background" 
                                                                Value="Transparent" 
                                                                />
                                                            <Setter
                                                                Property="Margin"
                                                                Value="5 2 5 2"
                                                                />
                                                            <Setter 
                                                                Property="Template"
                                                                >
                                                                <Setter.Value>
                                                                    <ControlTemplate 
                                                                        TargetType="ListViewItem"
                                                                        >
                                                                        <materialDesign:Card
                                                                            Foreground="{DynamicResource MaterialDesignBody}"
                                                                            Margin="2,5,2,0"
                                                                            PreviewMouseLeftButtonDown="lvTage_MouseDown"
                                                                            IsEnabled="{Binding Path=Aktiviert}"
                                                                            >
                                                                            <ig:DragDropManager.DropTarget>
                                                                                <ig:DropTarget IsDropTarget="True"/>
                                                                            </ig:DragDropManager.DropTarget>
                                                                            <materialDesign:Card.Style>
                                                                                <Style 
                                                                                    BasedOn="{StaticResource CardCustom}"  
                                                                                    TargetType="{x:Type materialDesign:Card}"
                                                                                    >
                                                                                </Style>
                                                                            </materialDesign:Card.Style>
                                                                            <materialDesign:Card.Background>
                                                                                <Binding 
                                                                                    Path="Farbe"
                                                                                    />
                                                                            </materialDesign:Card.Background>
                                                                            <Border
                                                                                BorderThickness="2"
                                                                                BorderBrush="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataContext.BorderColor}"
                                                                                >
                                                                                <StackPanel
                                                                                    Margin="3,3,3,3"
                                                                                    >
                                                                                    <Grid>
                                                                                        <Grid.ColumnDefinitions>
                                                                                            <ColumnDefinition Width="30*"/>
                                                                                            <ColumnDefinition Width="70*"/>
                                                                                            <ColumnDefinition Width="Auto"/>
                                                                                        </Grid.ColumnDefinitions>
                                                                                        <Grid.RowDefinitions>
                                                                                            <RowDefinition Height="Auto"/>
                                                                                            <RowDefinition Height="Auto"/>
                                                                                            <RowDefinition Height="Auto"/>
                                                                                            <RowDefinition Height="Auto"/>
                                                                                        </Grid.RowDefinitions>
                                                                                        <TextBlock
                                                                                            Grid.Column="0"
                                                                                            Grid.Row="0"
                                                                                            FontWeight="Medium"
                                                                                            FontSize="{StaticResource Body}"
                                                                                            Text="{Binding Path=DatumD, StringFormat={}{0:dd.MM.yyyy}}"
                                                                                            />
                                                                                        <Grid
                                                                                            Grid.Column="1"
                                                                                            Grid.Row="1"
                                                                                            >
                                                                                            <Grid.ColumnDefinitions>
                                                                                                <ColumnDefinition Width="50*"/>
                                                                                                <ColumnDefinition Width="50*"/>
                                                                                            </Grid.ColumnDefinitions>
                                                                                            <TextBlock
                                                                                                Grid.Column="0"
                                                                                                FontSize="{StaticResource Body}" 
                                                                                                FontWeight="Regular"
                                                                                                Visibility="{Binding Path=AufwandEMVisibility}"
                                                                                                HorizontalAlignment="Left"
                                                                                                Margin="5,0,0,0"
                                                                                                >
                                                                                                <TextBlock.Text>
                                                                                                    <MultiBinding 
                                                                                                        StringFormat="{}Aufwand EM: {0:#,0}"
                                                                                                        >
                                                                                                        <Binding 
                                                                                                            Path="AufwandEM"
                                                                                                            />
                                                                                                    </MultiBinding>
                                                                                                </TextBlock.Text>
                                                                                            </TextBlock>
                                                                                            <TextBlock
                                                                                                Grid.Column="1"
                                                                                                FontSize="{StaticResource Body}" 
                                                                                                FontWeight="Regular"
                                                                                                Visibility="{Binding Path=AufwandEMVisibility}"
                                                                                                HorizontalAlignment="Left"
                                                                                                Margin="5,0,0,0"
                                                                                                >
                                                                                                <TextBlock.Text>
                                                                                                    <MultiBinding 
                                                                                                        StringFormat="{}Einzelteile: {0}"
                                                                                                        >
                                                                                                        <Binding 
                                                                                                            Path="Einzelteile"
                                                                                                            />
                                                                                                    </MultiBinding>
                                                                                                </TextBlock.Text>
                                                                                            </TextBlock>
                                                                                        </Grid>
                                                                                        <Grid
                                                                                            Grid.Column="1"
                                                                                            Grid.Row="0"
                                                                                            >
                                                                                            <Grid.ColumnDefinitions>
                                                                                                <ColumnDefinition Width="50*"/>
                                                                                                <ColumnDefinition Width="50*"/>
                                                                                            </Grid.ColumnDefinitions>
                                                                                            <TextBlock
                                                                                                Name="expanderTag"
                                                                                                Grid.Column="0"
                                                                                                Text="{Binding Path=PlanZellen, StringFormat={}Planzellen: {0}}"
                                                                                                FontSize="{StaticResource Body}" 
                                                                                                FontWeight="Medium" 
                                                                                                HorizontalAlignment="Left"
                                                                                                Margin="5,0,0,0"
                                                                                                >
                                                                                            </TextBlock>
                                                                                            <TextBlock
                                                                                                Grid.Column="1"
                                                                                                FontSize="{StaticResource Body}" 
                                                                                                FontWeight="Medium"
                                                                                                HorizontalAlignment="Left"
                                                                                                Margin="5,0,0,0"
                                                                                                >
                                                                                                <TextBlock.Text>
                                                                                                    <MultiBinding 
                                                                                                        StringFormat="{}{0}: {1}"
                                                                                                        >
                                                                                                        <Binding 
                                                                                                            Path="ZellenArt"
                                                                                                            />
                                                                                                        <Binding 
                                                                                                            Path="Zellen"
                                                                                                            />
                                                                                                    </MultiBinding>
                                                                                                </TextBlock.Text>
                                                                                            </TextBlock>
                                                                                        </Grid>
                                                                                        <Grid
                                                                                            Grid.Row="2"
                                                                                            Grid.Column="0"
                                                                                            Grid.ColumnSpan="2"
                                                                                            Margin="5,0,0,0"
                                                                                            >
                                                                                            <TextBlock
                                                                                                Grid.Column="0"
                                                                                                Text="{Binding Path=Einträge, StringFormat={}Einträge: {0}}"
                                                                                                FontSize="{StaticResource Caption}" 
                                                                                                FontWeight="Regular" 
                                                                                                HorizontalAlignment="Center"
                                                                                                >
                                                                                            </TextBlock>
                                                                                        </Grid>
                                                                                        <Grid
                                                                                            Grid.Column="2"
                                                                                            Grid.Row="0"
                                                                                            Grid.RowSpan="4"
                                                                                            >
                                                                                            <materialDesign:PackIcon 
                                                                                                Kind="CheckAll" 
                                                                                                Visibility="{Binding Path=FertigAVVisibility}"
                                                                                                VerticalAlignment="Center"
                                                                                                Foreground="#1B5E20"
                                                                                                />
                                                                                        </Grid>
                                                                                    </Grid>
                                                                                </StackPanel>
                                                                            </Border>
                                                                        </materialDesign:Card>
                                                                    </ControlTemplate>
                                                                </Setter.Value>
                                                            </Setter>
                                                            <Style.Triggers>
                                                                <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=IsVisible}" 
                                                                    Value="True">
                                                                    <DataTrigger.EnterActions>
                                                                        <BeginStoryboard>
                                                                            <Storyboard>
                                                                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.5"/>
                                                                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY" From="0" Duration="0:0:0.3"/>
                                                                            </Storyboard>
                                                                        </BeginStoryboard>
                                                                    </DataTrigger.EnterActions>
                                                                </DataTrigger>
                                                            </Style.Triggers>
                                                        </Style>
                                                    </ListView.ItemContainerStyle>
                                                </ListView>
                                            </StackPanel>
                                        </Border>
                                    </materialDesign:Card>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListView.ItemContainerStyle>
            </ListView>

     

    I hope someone has an idea.

     

    Greetings Benedikt


  2. Answer
    Vladimir Stoyanov
    Admin
    Vladimir Stoyanov avatar
    686 posts

    Posted 26 Sep 2019 Link to this post

    Hello Benedikt,

    Thank you for the provided pictures. 

    My current understanding is that you want to disable the RadPanelBarItems based on some condition and apply a background color to them. Feel free to correct me, if I am wrong and provide some more information about the scenario.

    I am attaching a sample project demonstrating how to achieve the desired requirements. You can use the ItemContainerStyle property of the RadPanelBar in order to conditionally disable the items by binding the IsEnabled property to a property of the model. If the RadPanelBar is empty after applying such a style, most likely you are using the NoXaml dlls and have not based the style on the default one for the theme.

    Please, give the sample project a try and let me know, if you find it helpful.

    Regards,
    Vladimir Stoyanov
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Benedikt
    Benedikt avatar
    39 posts
    Member since:
    Feb 2018

    Posted 27 Sep 2019 in reply to Vladimir Stoyanov Link to this post

    Hi Vladimir,

    you were completely right and your example helped me :)

     

    Thank you.

     

    Greetings

    Benedikt

Back to Top