This is a migrated thread and some comments may be shown as answers.

PanelBar hierarchical DataBinding with Disabeld and Color binded

2 Answers 29 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Benedikt
Top achievements
Rank 3
Iron
Iron
Iron
Benedikt asked on 23 Sep 2019, 02:35 PM

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 Answers, 1 is accepted

Sort by
0
Accepted
Vladimir Stoyanov
Telerik team
answered on 26 Sep 2019, 11:43 AM

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.
0
Benedikt
Top achievements
Rank 3
Iron
Iron
Iron
answered on 27 Sep 2019, 06:00 AM

Hi Vladimir,

you were completely right and your example helped me :)

 

Thank you.

 

Greetings

Benedikt

Tags
PanelBar
Asked by
Benedikt
Top achievements
Rank 3
Iron
Iron
Iron
Answers by
Vladimir Stoyanov
Telerik team
Benedikt
Top achievements
Rank 3
Iron
Iron
Iron
Share this question
or