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
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
Rank 3
Iron
Iron
Iron
Hi Vladimir,
you were completely right and your example helped me :)
Thank you.
Greetings
Benedikt