I need to create a custom ComboBox with 2 ItemsPresenter but I don't know how to set the ItemsPresenter where to add and remove items.
I have tried to get the ItemsPresenter:
ItemsPresenter itemsPresenter = (ItemsPresenter)comboBoxAlbum.FindName("ItemsPresenterAlbum");
but I don't know how to get the Items collection.
This is how I have modified the Popup part:
<Popup x:Name="PART_Popup" AllowsTransparency="True" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
<Themes:SystemDropShadowChrome x:Name="shadow" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=templateRoot}">
<Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="100*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#FF929CA4">
<ScrollViewer Background="#FF929CA4">
<Grid x:Name="ToolBar" SnapsToDevicePixels="True" Background="#FF929CA4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel x:Name="btnStretchNone" MouseUp="btnStretch_MouseUp" Grid.Column="0" Background="{Binding BtnStretchNone}" Style="{DynamicResource StakPanelEffect}">
<Image Width="32" Height="32" Margin="5" Source="Resources/StretchNone.png"/>
</StackPanel>
<StackPanel x:Name="btnStretchFill" MouseUp="btnStretch_MouseUp" Grid.Column="1" Background="{Binding BtnStretchFill}" Style="{DynamicResource StakPanelEffect}">
<Image Width="32" Height="32" Margin="5" Source="Resources/StretchFill.png"/>
</StackPanel>
<StackPanel x:Name="btnStretchUniform" MouseUp="btnStretch_MouseUp" Grid.Column="2" Background="{Binding BtnStretchUniform}" Style="{DynamicResource StakPanelEffect}">
<Image Width="32" Height="32" Margin="5" Source="Resources/StretchUniform.png"/>
</StackPanel>
<StackPanel x:Name="btnStretchUniformFill" MouseUp="btnStretch_MouseUp" Grid.Column="3" Background="{Binding BtnStretchUniformFill}" Style="{DynamicResource StakPanelEffect}">
<Image Width="32" Height="32" Margin="5" Source="Resources/StretchUniformFill.png"/>
</StackPanel>
<StackPanel x:Name="btnSettings" MouseUp="btnSettings_MouseUp" Grid.Column="4" Background="{Binding BtnStretchFrame}" Style="{DynamicResource StakPanelEffect}" IsEnabled="False">
<Image Width="32" Height="32" Margin="5" Source="Resources/SettingsB.png"/>
</StackPanel>
</Grid>
</ScrollViewer>
</Grid>
<Grid Grid.Row="1">
<TabControl Height="{Binding ActualHeight, ConverterParameter=-42, Converter={StaticResource AdditionConverter}, ElementName=DropDownBorder}">
<TabItem Header="Albums">
<ScrollViewer x:Name="DropDownScrollViewerAlbum">
<Grid x:Name="gridAlbum" RenderOptions.ClearTypeHint="Enabled">
<Canvas x:Name="canvasAlbum" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRectAlbum" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ConverterParameter=-72, Converter={StaticResource AdditionConverter}, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ConverterParameter=-8, Converter={StaticResource AdditionConverter}, ElementName=DropDownBorder}"/>
</Canvas>
<ItemsPresenter x:Name="ItemsPresenterAlbum" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ScrollViewer>
</TabItem>
<TabItem Header="Slides">
<ScrollViewer x:Name="DropDownScrollViewerSlide">
<Grid x:Name="gridSlide" RenderOptions.ClearTypeHint="Enabled">
<Canvas x:Name="canvasSlide" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRectSlide" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ConverterParameter=-72, Converter={StaticResource AdditionConverter}, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ConverterParameter=-8, Converter={StaticResource AdditionConverter}, ElementName=DropDownBorder}"/>
</Canvas>
<ItemsPresenter x:Name="ItemsPresenterSlide" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ScrollViewer>
</TabItem>
</TabControl>
</Grid>
</Grid>
</Border>
</Themes:SystemDropShadowChrome>
</Popup>
There are 2 ItemsPresenter (ItemsPresenterAlbum, ItemsPresenterSlide). How can I add items to a specific ItemsPresenter? Using the Items.Add() it add only to the second ItemsPresenter.
Related
I have a Border and I Change it's Cornerradius to 19.
Meanwhile, I have a ScrollViewer, it contains a ItemsControl includeing a Label, a TextBox, and a Border.
I find content in ItemsControl will cover original Border. So Border's Cornerradius is not 19.
Image below as:
It's my xaml:
<Border Grid.Row="3" Background="#d8d8d8" CornerRadius="19" Margin="24,0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="46"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Foreground="#011627" FontFamily="Arial" FontSize="18" Content="Feedback" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Grid.Row="0" Grid.Column="1" Foreground="#011627" FontFamily="Arial" FontSize="18" Content="Feedback codes" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<ScrollViewer Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding SystemStatusList}" AlternationCount="2">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Background="Transparent" x:Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" BorderThickness="0" Foreground="#d8d8d8" Height="42" FontFamily="Arial" FontSize="18" Content="{Binding SystemStatus}"
HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Center" VerticalContentAlignment="Center" Margin="1,0"/>
<TextBox Grid.Column="1" BorderThickness="0" Foreground="White" Height="42" Background="{x:Null}" FontFamily="Arial" FontSize="18" Text="{Binding CustomName}" CaretBrush="White"
HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Center" VerticalContentAlignment="Center" Margin="0,0,1,0"/>
<Border Grid.Column="1" Width="165" Height="1" BorderThickness="1" BorderBrush="#979797" Opacity="0.24" Margin="0,24,0,0"/>
</Grid>
<DataTemplate.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter TargetName="grid" Property="Background" Value="#384451"/>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter TargetName="grid" Property="Background" Value="#2c3845"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
<Border Grid.Row="0" Grid.Column="0" Width="2" Height="46" Opacity="0.24" BorderThickness="2" BorderBrush="#979797" HorizontalAlignment="Right"/>
<Border Grid.Row="1" Grid.Column="0" Width="2" Height="763" Opacity="0.24" BorderThickness="2" BorderBrush="#979797" HorizontalAlignment="Right"/>
</Grid>
</Border>
What can I do? Thanks!
Edit:
Use a custom Border implementation that supports clipping or specify a bottom margin for the ScrollViewer:
<ScrollViewer Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Auto"
Margin="0 0 0 20">
<ItemsControl ItemsSource="{Binding SystemStatusList}" AlternationCount="2">
I find a answer as below.
I add border OpacityMask:
<Border.OpacityMask>
<DrawingBrush Stretch="Uniform">
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="#d8d8d8">
<GeometryDrawing.Geometry>
<RectangleGeometry RadiusX="19" RadiusY="19" Rect="0,0,593,741"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Border.OpacityMask>
And use second Border to cover first Border:
<Border Grid.Row="3" BorderThickness="1" BorderBrush="#d8d8d8" CornerRadius="19" Margin="24,0"/>
It finally show as:
I'm currently creating a new WPF window which look like this :
The part starting with "Filter and with the array is define like this :
<Grid Grid.Row="2" Visibility="{Binding FilterVisibility}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Margin="20,0,0,0" HorizontalAlignment="Left"
Text="{Binding Source={x:Static dictionnaries:MainDictionnary.bcfFilter}, StringFormat={}{0} :}"/>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="150"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ItemsControl Grid.Column="1" Margin="2" Grid.IsSharedSizeScope="True"
ItemsSource="{Binding Filters}">
<ItemsControl.Template>
<ControlTemplate>
<Border Background="White" BorderBrush="Black" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="col1"/>
<ColumnDefinition Width="1" SharedSizeGroup="marg"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="col2"/>
<ColumnDefinition Width="1" SharedSizeGroup="marg"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="col3"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{x:Static dictionnaries:MainDictionnary.filterField}"
Grid.Column="0"
Margin="5,2"/>
<Line Grid.Column="1"
Y2="{Binding ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"
Stroke="Gray"
HorizontalAlignment="Center"/>
<TextBlock Text="{x:Static dictionnaries:MainDictionnary.filterCondition}"
Grid.Column="2" Margin="5,2"
TextWrapping="WrapWithOverflow" TextAlignment="Center"/>
<Line Grid.Column="3"
Y2="{Binding ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"
Stroke="Gray"
HorizontalAlignment="Center"/>
<TextBlock Text="{x:Static dictionnaries:MainDictionnary.filterValue}"
Grid.Column="4" Margin="5,2"
TextWrapping="WrapWithOverflow" TextAlignment="Center"/>
</Grid>
<Line Grid.Row="0" Fill="Black"
X2="{Binding ActualWidth, Mode=OneWay ,RelativeSource={RelativeSource Self}}"
Stroke="Black" VerticalAlignment="Bottom"/>
<ScrollViewer Grid.Row="1" MinHeight="50" VerticalScrollBarVisibility="Auto">
<ItemsPresenter/>
</ScrollViewer>
</Grid>
</Border>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="col1"/>
<ColumnDefinition Width="1" SharedSizeGroup="marg"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="col2"/>
<ColumnDefinition Width="1" SharedSizeGroup="marg"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="col3"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ComboBox Grid.Column="0" VerticalAlignment="Center" Margin="3" SelectedItem="{Binding Field}"/>
<Line Grid.Column="1"
Y2="{Binding ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"
Stroke="Gray"
HorizontalAlignment="Center"/>
<ComboBox Grid.Column="2" VerticalAlignment="Center" Margin="3" SelectedItem="{Binding Condition}"/>
<Line Grid.Column="3"
Y2="{Binding ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"
Stroke="Gray"
HorizontalAlignment="Center"/>
<TextBox Grid.Column="4" VerticalAlignment="Center"
HorizontalAlignment="Left" Margin="3"
MinWidth="50"
Text="{Binding Value, UpdateSourceTrigger=PropertyChanged, NotifyOnTargetUpdated=True}"/>
<Line VerticalAlignment="Bottom"
Grid.ColumnSpan="6" Grid.Column="0"
X2="{Binding ActualWidth, Mode=OneWay, RelativeSource={RelativeSource Self}}"
Stroke="Black"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<StackPanel Grid.Column="2" Margin="0,0,20,0">
<Button Height="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" Margin="2" Padding="0"
Command="{Binding AddFilterCommand}">
<Path Stroke="Black" StrokeThickness="1" VerticalAlignment="Center">
<Path.Data>M0,5 H10 M5,0 V10</Path.Data>
</Path>
</Button>
<Button Height="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" Margin="2"
Command="{Binding RemoveFilterCommand}">
<Path Stroke="Black" StrokeThickness="1" VerticalAlignment="Center">
<Path.Data>M0,0 H8</Path.Data>
</Path>
</Button>
</StackPanel>
</Grid>
The visibility of this part is controled by my viewmodel. Until this everything is working nice, but when I add new rows to the array with the + button, I would like the array not to grow but use a ScrollViewer. So in the ItemControl.template is added the scrollViewer.
But I got this result :
How can I get the scrollviewer to work ?
Set the Height of the second RowDefinition to *:
<RowDefinition Height="*"/>
Or set the Height property of the ItemsControl or ScrollViewer.
A ScrollViewer must have a constrained height to be able to calculate the scrollable view port.
I have a problem with the intellisense. It works in code behind but not in xaml code (wpf).
1st image: Intelissense not working
2nd image: I comment on the 1st usercontrol and the intellisense works.
Here the code is in the usercontrol "cuAccessoiresAutres":
<UserControl x:Class="MicroSecu.ControleUtilisateur.cuAccessoiresAutres"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:ControleUtilisateur="clr-namespace:MicroSecu.ControleUtilisateur"
mc:Ignorable="d"
d:DesignHeight="251" d:DesignWidth="672">
<UserControl.Resources>
<SolidColorBrush x:Key="controlBorderBrush" Color="LightGray" />
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<!--En tête-->
<Border Grid.Row="0" Grid.Column="0" BorderThickness="0,0,1,1" BorderBrush="{StaticResource controlBorderBrush}"></Border>
<Border Grid.Row="0" Grid.Column="1" BorderThickness="1,2,1,1" BorderBrush="{StaticResource controlBorderBrush}">
<TextBlock Text="Gauche" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="16" FontWeight="Bold"></TextBlock>
</Border>
<Border Grid.Row="0" Grid.Column="2" BorderThickness="1,2,2,1" BorderBrush="{StaticResource controlBorderBrush}">
<TextBlock Text="Droit" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="16" FontWeight="Bold"></TextBlock>
</Border>
<!--Profil porteur-->
<Border Grid.Row="1" Grid.Column="0" BorderThickness="2,1,1,1" BorderBrush="{StaticResource controlBorderBrush}">
<TextBlock Text="Profil porteur" VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="12" TextWrapping="Wrap"></TextBlock>
</Border>
<Border Grid.Row="1" Grid.Column="1" BorderThickness="1,1,1,1" BorderBrush="{StaticResource controlBorderBrush}">
<CheckBox VerticalAlignment="Center" HorizontalAlignment="Center" IsChecked="{Binding MaConsole.ProfilPorteurGauche}" IsEnabled="{Binding MaConsole.ProfilPorteurGaucheEstDispo}"></CheckBox>
</Border>
<Border Grid.Row="1" Grid.Column="2" BorderThickness="1,1,2,1" BorderBrush="{StaticResource controlBorderBrush}">
<CheckBox VerticalAlignment="Center" HorizontalAlignment="Center" IsChecked="{Binding MaConsole.ProfilPorteurDroit}" IsEnabled="{Binding MaConsole.ProfilPorteurDroitEstDispo}"></CheckBox>
</Border>
<!--Anneau décalé-->
<Border Grid.Row="2" Grid.Column="0" BorderThickness="2,1,1,1" BorderBrush="{StaticResource controlBorderBrush}">
<TextBlock Text="Anneau décalé" VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="12" TextWrapping="Wrap"></TextBlock>
</Border>
<Border Grid.Row="2" Grid.Column="1" BorderThickness="1,1,1,1" BorderBrush="{StaticResource controlBorderBrush}">
<CheckBox VerticalAlignment="Center" HorizontalAlignment="Center" IsChecked="{Binding MaConsole.AnneauDécaléGauche}" IsEnabled="{Binding MaConsole.AnneauDécaléGaucheEstDispo}"></CheckBox>
</Border>
<Border Grid.Row="2" Grid.Column="2" BorderThickness="1,1,2,1" BorderBrush="{StaticResource controlBorderBrush}">
<CheckBox VerticalAlignment="Center" HorizontalAlignment="Center" IsChecked="{Binding MaConsole.AnneauDécaléDroit}" IsEnabled="{Binding MaConsole.AnneauDécaléDroitEstDispo}"></CheckBox>
</Border>
<!--Glissière de reprise-->
<Border Grid.Row="3" Grid.Column="0" BorderThickness="2,1,1,1" BorderBrush="{StaticResource controlBorderBrush}">
<TextBlock Text="Glissière de reprise" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap"></TextBlock>
</Border>
<Border Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" BorderThickness="1,1,2,1" BorderBrush="{StaticResource controlBorderBrush}">
<CheckBox VerticalAlignment="Center" HorizontalAlignment="Center" IsChecked="{Binding MaConsole.GlissièreDeReprise}" IsEnabled="{Binding MaConsole.GlissièreDeRepriseEstDispo}"></CheckBox>
</Border>
<!--Glissière de reprise plateau arrière-->
<Border Grid.Row="4" Grid.Column="0" BorderThickness="2,1,1,1" BorderBrush="{StaticResource controlBorderBrush}">
<TextBlock Text="Glissière de reprise plateau arrière" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap"></TextBlock>
</Border>
<Border Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="2" BorderThickness="1,1,2,1" BorderBrush="{StaticResource controlBorderBrush}">
<CheckBox VerticalAlignment="Center" HorizontalAlignment="Center" IsChecked="{Binding MaConsole.GlissièreDeReprisePlateauArrière}" IsEnabled="{Binding MaConsole.GlissièreDeReprisePlateauArrièreEstDispo}"></CheckBox>
</Border>
<!--Tôle sur extensible-->
<Border Grid.Row="5" Grid.Column="0" BorderThickness="2,1,1,1" BorderBrush="{StaticResource controlBorderBrush}">
<TextBlock Text="Tôle sur extensible" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap"></TextBlock>
</Border>
<Border Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="2" BorderThickness="1,1,2,1" BorderBrush="{StaticResource controlBorderBrush}">
<CheckBox VerticalAlignment="Center" HorizontalAlignment="Center" IsChecked="{Binding MaConsole.TôleSurExtensible}" IsEnabled="{Binding MaConsole.TôleSurExtensibleEstDispo}"></CheckBox>
</Border>
<!--Plaque verte RMTCE-->
<Border Grid.Row="6" Grid.Column="0" BorderThickness="2,1,1,1" BorderBrush="{StaticResource controlBorderBrush}">
<TextBlock Text="Plaque verte RMTCE" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap"></TextBlock>
</Border>
<Border Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="2" BorderThickness="1,1,2,1" BorderBrush="{StaticResource controlBorderBrush}">
<CheckBox VerticalAlignment="Center" HorizontalAlignment="Center" IsChecked="{Binding MaConsole.PlaqueVerteRMTCE}" IsEnabled="{Binding MaConsole.PlaqueVerteRMTCEEstDispo}"></CheckBox>
</Border>
<!--Plaque jaune benne 1000L-->
<Border Grid.Row="7" Grid.Column="0" BorderThickness="2,1,1,1" BorderBrush="{StaticResource controlBorderBrush}">
<TextBlock Text="Plaque jaune benne 1000L" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap"></TextBlock>
</Border>
<Border Grid.Row="7" Grid.Column="1" Grid.ColumnSpan="2" BorderThickness="1,1,2,2" BorderBrush="{StaticResource controlBorderBrush}">
<CheckBox VerticalAlignment="Center" HorizontalAlignment="Center" IsChecked="{Binding MaConsole.PlaqueJaune1000L}" IsEnabled="{Binding MaConsole.PlaqueJaune1000LEstDispo}"></CheckBox>
</Border>
</Grid>
I have a control - ItemsControl that was binding to ObservableCollection of a simple model,
I want that it's itemscontrol will have a capability to insert dircetion from bottom to top, How to i can implement that?
Currently, Every insertion to itemscontrol starts from the top to bottom, but i want to change that..
<Window >
<Window.Resources>
<DataTemplate x:Key="ModelTemplate" DataType="Model:Model">
<Grid
Tag="{Binding Path=Id}"
Background="Transparent">
<Border
Name="border"
Background="#2a3345"
BorderThickness="0"
CornerRadius="10"
Margin="10">
<Border.Effect>
<DropShadowEffect
ShadowDepth="0"
Opacity="0.8"
BlurRadius="10"/>
</Border.Effect>
<Grid
Height="100"
Width="280"
Margin="6">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="1"
Text="{Binding Path=Title}"
TextOptions.TextRenderingMode="ClearType"
TextOptions.TextFormattingMode="Display"
Foreground="White"
FontFamily="Arial"
FontSize="14"
FontWeight="Bold"
VerticalAlignment="Center"
Margin="2,4,4,2"
TextWrapping="Wrap"
TextTrimming="CharacterEllipsis" />
<TextBlock
Grid.Row="1"
Grid.Column="1"
Text="{Binding Path=Message}"
TextOptions.TextRenderingMode="ClearType"
TextOptions.TextFormattingMode="Display"
Foreground="White"
FontFamily="Arial"
VerticalAlignment="Center"
Margin="2,2,4,4"
TextWrapping="Wrap"
TextTrimming="CharacterEllipsis"/>
</Grid>
</Border>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<ItemsControl
FocusVisualStyle="{x:Null}"
ItemsSource="{Binding SimpleCollection}"
ItemTemplate="{StaticResource ModelTemplate}" >
</ItemsControl>
</Grid>
The solution is override ItemsControl's ItemsPanel as follows:
<Window >
<Window.Resources>
<ScaleTransform ScaleY="-1" x:Key="Transform"/>
<DataTemplate x:Key="ModelTemplate" DataType="Model:Model">
<Grid
LayoutTransform="{StaticResource Transform}"
Tag="{Binding Path=Id}"
Background="Transparent">
<Border
Name="border"
Background="#2a3345"
BorderThickness="0"
CornerRadius="10"
Margin="10">
<Border.Effect>
<DropShadowEffect
ShadowDepth="0"
Opacity="0.8"
BlurRadius="10"/>
</Border.Effect>
<Grid
Height="100"
Width="280"
Margin="6">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="1"
Text="{Binding Path=Title}"
TextOptions.TextRenderingMode="ClearType"
TextOptions.TextFormattingMode="Display"
Foreground="White"
FontFamily="Arial"
FontSize="14"
FontWeight="Bold"
VerticalAlignment="Center"
Margin="2,4,4,2"
TextWrapping="Wrap"
TextTrimming="CharacterEllipsis" />
<TextBlock
Grid.Row="1"
Grid.Column="1"
Text="{Binding Path=Message}"
TextOptions.TextRenderingMode="ClearType"
TextOptions.TextFormattingMode="Display"
Foreground="White"
FontFamily="Arial"
VerticalAlignment="Center"
Margin="2,2,4,4"
TextWrapping="Wrap"
TextTrimming="CharacterEllipsis"/>
</Grid>
</Border>
</Grid>
</DataTemplate>
<ItemsPanelTemplate x:Key="ItemsPanelTemplateVerticalAlignment">
<StackPanel VerticalAlignment="Bottom" LayoutTransform="{StaticResource Transform}"/>
</ItemsPanelTemplate>
</Window.Resources>
<Grid>
<ItemsControl
FocusVisualStyle="{x:Null}"
ItemsSource="{Binding SimpleCollection}"
ItemTemplate="{StaticResource ModelTemplate}"
ItemsPanel="{StaticResource ItemsPanelTemplateVerticalAlignment}"/>
</Grid>
</Window>
The order of items in ItemsControl is the same as in ObservableCollection. Thus, if you do Collection.Insert(0, item), new item in ItemsControl will appear on the top.
Here's my XAML and how it looks like:
<Window x:Class="GameLenseWpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="450" Width="350" MinHeight="450" MinWidth="350">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.15*" />
<RowDefinition />
</Grid.RowDefinitions>
<Image Grid.Row="0" Stretch="Fill" Source="Image/topBarBg.png" />
<StackPanel Orientation="Horizontal" Grid.Row="0">
<TextBlock Text="Platform"
Foreground="White"
FontFamily="Georgia"
FontSize="15"
Margin="10"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<ComboBox x:Name="cmbPlatform"
Margin="10"
FontFamily="Georgia"
FontSize="15"
MinHeight="30"
MinWidth="140"
VerticalAlignment="Center"
VerticalContentAlignment="Center" SelectionChanged="cmbPlatform_SelectionChanged">
<ComboBoxItem>All Platforms</ComboBoxItem>
<ComboBoxItem>Playstation 3</ComboBoxItem>
<ComboBoxItem>XBox 360</ComboBoxItem>
<ComboBoxItem>Wii</ComboBoxItem>
<ComboBoxItem>PSP</ComboBoxItem>
<ComboBoxItem>DS</ComboBoxItem>
</ComboBox>
</StackPanel>
<Image x:Name="imgAbout" Grid.Row="0" Source="Image/about.png"
Height="16" HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0 0 10 0" />
<ListBox Grid.Row="1" x:Name="lstGames" Background="#343434" Padding="5"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
HorizontalContentAlignment="Stretch">
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Style.Resources>
<!-- SelectedItem with focus -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent" />
<!-- SelectedItem without focus -->
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}"
Color="Transparent" />
<!-- SelectedItem text foreground -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}"
Color="Black" />
</Style.Resources>
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="120" Margin="0 10" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Border BorderBrush="#202020" BorderThickness="5" CornerRadius="4" Panel.ZIndex="0">
<Canvas Grid.Row="0" Grid.Column="0" >
<Image Source="{Binding ImageUrl}" Canvas.Left="0" Canvas.Top="0" Stretch="UniformToFill"/>
<Image Source="Image/youtube.png" Canvas.Bottom="0" Canvas.Right="0" Height="20" Width="20" />
</Canvas>
</Border>
<StackPanel Grid.Row="0" Grid.Column="1" Margin="12 0 0 0">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Title:" FontFamily="Arial" Foreground="White"/>
<TextBlock Text="{Binding Title}" FontFamily="Arial" Foreground="White" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Release Date:" FontFamily="Arial" Foreground="White" />
<TextBlock Text="{Binding ReleaseDate}" FontFamily="Arial" Foreground="White" />
</StackPanel>
<TextBlock Text="Synopsis" FontFamily="Arial" Foreground="White" />
<TextBox Background="#454545" Foreground="White" TextWrapping="Wrap" Text="{Binding Synopsis}" MaxHeight="73" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
I just want to games image to stretch to fill the canvas bounds, which is inside of the rounder border.
Why is it not doing this?
The problem is that you have the images within a canvas. Basically, any time you put an element in a Canvas panel, you are disregarding the entire layout system. Elements within a canvas do not participate in layout at all. What you want to do is replace the Canvas element with a plain Grid element (you don't need to define rows or columns, it will default to a single row/column.)
EDIT
And actually looking more closely at what you are trying to do, you'll need to make some slight tweaks. Try this.
<Border BorderBrush="#202020" BorderThickness="5" CornerRadius="4">
<Grid>
<Image Source="{Binding ImageUrl}" Stretch="UniformToFill"/>
<Image Source="Image/youtube.png" HorizontalAlignment="Right" VerticalAlignment="Bottom" Height="20" Width="20" />
</Grid>
</Border>
your problem is here
<Border BorderBrush="#202020" BorderThickness="5" CornerRadius="4" Panel.ZIndex="0">
<Canvas Grid.Row="0" Grid.Column="0" >
<Image Source="{Binding ImageUrl}" Canvas.Left="0" Canvas.Top="0" Width="80" Stretch="Fill"/>
<Image Source="Image/youtube.png" Canvas.Bottom="0" Canvas.Right="0" Height="20" Width="20" />
</Canvas>
</Border>
you have a BorderThickness Attribute which puts the black border around the image, just remove it or set it to 0 and this will solve the problem.
so your code will be
<Border BorderBrush="#202020" CornerRadius="4" Panel.ZIndex="0">
<Canvas Grid.Row="0" Grid.Column="0" >
<Image Source="{Binding ImageUrl}" Canvas.Left="0" Canvas.Top="0" Width="80" Stretch="Fill"/>
<Image Source="Image/youtube.png" Canvas.Bottom="0" Canvas.Right="0" Height="20" Width="20" />
</Canvas>
</Border>
or
<Border BorderBrush="#202020" BorderThickness="0" CornerRadius="4" Panel.ZIndex="0">
<Canvas Grid.Row="0" Grid.Column="0" >
<Image Source="{Binding ImageUrl}" Canvas.Left="0" Canvas.Top="0" Width="80" Stretch="Fill"/>
<Image Source="Image/youtube.png" Canvas.Bottom="0" Canvas.Right="0" Height="20" Width="20" />
</Canvas>
</Border>