I am working on a simple node editor, something like this (for me it is a model program). I have two windows in XAML with different solutions. In the first case (still not completed, but for demonstration), I am using templates inside grid:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Grafika"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="Grafika.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<DataTemplate DataType="{x:Type local:Node}">
<Thumb Width="{Binding Width}" Height="{Binding Height}" DragDelta="Thumb_DragDelta">
<Thumb.Template>
<ControlTemplate>
<Border Background="CadetBlue"/>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</DataTemplate>
<DataTemplate DataType="{x:Type local:Connector}">
<Line Name="Connection" Stroke="Red" StrokeThickness="3" X1="{Binding StartX}" Y1="{Binding StartY}" X2="{Binding StopX}" Y2="{Binding StopY}"/>
</DataTemplate>
</Window.Resources>
<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
<Grid x:Name="mrizka">
<Border x:Name="obrys" Width="200" Height="150" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Aqua" BorderBrush="Red" d:IsHidden="True"/>
<Path Data="M 25,25 H 250 V 250" Stroke="Black" d:IsHidden="True"/>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<Border>
<Border.Background>
<VisualBrush TileMode="Tile" Viewport="0,0,50,50" ViewportUnits="Absolute" Viewbox="0,0,50,50" ViewboxUnits="Absolute">
<VisualBrush.Visual>
<Rectangle Stroke="Black" StrokeThickness="1" Height="50" Width="50"/>
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
</Border>
</ScrollViewer>
<ItemsControl ItemsSource="{Binding NodeList}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
<ItemsControl ItemsSource="{Binding Connections}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
</Window>
with output
In second case, I am taking templates into ListBox (with combination of CompositeCollection) and I thought it would work since the previous case worked correctly. However, when I launch the program nothing shows.
Code:
<Window x:Class="Grafika.Test1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Grafika"
mc:Ignorable="d"
Title="Test1" Height="600" Width="800" x:Name="view" >
<Window.Resources>
<Style TargetType="Control" x:Key="EmptyStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
<Grid Margin="10">
<Grid.Resources>
<CompositeCollection x:Key="Col">
<CollectionContainer Collection="{Binding DataContext.NodeList, Source={x:Reference view}}"/>
<CollectionContainer Collection="{Binding DataContext.Connections, Source={x:Reference view}}"/>
</CompositeCollection>
<!-- -->
<DataTemplate DataType="{x:Type local:Node}">
<Thumb DragDelta="Thumb_DragDelta">
<Thumb.Template>
<ControlTemplate TargetType="Thumb">
<Canvas Margin="-10,-10,10,10">
<Border Height="{Binding Height}" Width="{Binding Width}" x:Name="rect" Background="Red" />
</Canvas>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</DataTemplate>
<!-- -->
<!-- -->
<DataTemplate DataType="{x:Type local:Connector}">
<Line Stroke="Blue" StrokeThickness="3" X1="{Binding Start.X}" Y1="{Binding Start.Y}" X2="{Binding Stop.X}" Y2="{Binding Stop.Y}" x:Name="Con"/>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Stop}" Value="{x:Null}">
<Setter TargetName="Con" Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
<!-- -->
</Grid.Resources>
<ListBox>
<ListBox.Template>
<ControlTemplate>
<Border>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" Opacity=".3">
<GradientStop Color="Azure" Offset="0"/>
<GradientStop Color="Yellow" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<ScrollViewer VerticalScrollBarVisibility ="Auto" HorizontalScrollBarVisibility="Auto">
<Border>
<Border.Background>
<VisualBrush TileMode="Tile" Viewbox="0,0,50,50" Viewport="0,0,50,50" ViewboxUnits="Absolute" ViewportUnits="Absolute">
<VisualBrush.Visual>
<Rectangle Stroke="DarkGray" StrokeThickness="0.5" Height="50" Width="50"/>
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
</Border>
</ScrollViewer>
</Border>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemsSource>
<StaticResource ResourceKey="Col"/>
</ListBox.ItemsSource>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas IsItemsHost="True" Background="Cornsilk" Height="{Binding AreaHeight}" Width="{Binding AreaWidth}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource EmptyStyle}"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Grid>
</Window>
My question is simple: Why is nothing displayed in the second case? Is there anything wrong in XAML or potentionally some binding missing? I don't think that code behind is at fault, since the first case is working.
You are setting a new Template for the ListBox without a panel for the items.
If you change the its Template and you don't add a panel that will contain the items, setting ListBox.ItemsPanel won't have any effect.
I've modified the ListBox Template according to your specification, adding a Canvas as container for the items.
<ListBox ItemsSource="{StaticResource Col}">
<ListBox.Template>
<ControlTemplate>
<Border>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" Opacity=".3">
<GradientStop Color="Azure" Offset="0"/>
<GradientStop Color="Yellow" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<ScrollViewer VerticalScrollBarVisibility ="Auto" HorizontalScrollBarVisibility="Auto">
<Border>
<Border.Background>
<VisualBrush TileMode="Tile" Viewbox="0,0,50,50" Viewport="0,0,50,50" ViewboxUnits="Absolute" ViewportUnits="Absolute">
<VisualBrush.Visual>
<Rectangle Stroke="DarkGray" StrokeThickness="0.5" Height="50" Width="50"/>
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
<Canvas IsItemsHost="True" Background="Cornsilk" Height="{Binding AreaHeight}" Width="{Binding AreaWidth}" />
</Border>
</ScrollViewer>
</Border>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Related
I've been developing some simple apps (just for educational purposes) with Windows Forms and now I'm starting to learn WPF, but it seems a bit more complex to me.
I would like to create a simple menu like the one you can see in the pictures. I've been trying to find it on Google and YouTube, but I only found tutorials about "Hamburger menu", which isn't what I'm looking for.
This is really an area where WPF shines: the layout you describe can be implemented with nothing more than a restyled tab control.
Start with an unstyled tab control with TabStripPlacement of Left:
Then edit the TabControl style to add gradient and margins behind the TabPanel:
Add the image and override the TabItem style to set the font and remove the background. I used a chevron to indicate selection rather than bolding the text, but that would have been handled the same way.
Here is the full XAML used for the screenshots above:
<Window x:Class="StackOverflowTabControl.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:StackOverflowTabControl"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
<Style x:Key="ItemContainerStyle" TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Margin="15,5">
<Path Width="10" Height="14" Margin="0,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Stretch="Fill" Fill="#FF000000" Data="F1 M 39.8307,37.6042L 36.6641,34.4375L 25.1849,23.3542L 35.4766,23.3542L 50.5182,37.6042L 35.4766,51.8542L 25.1849,51.8542L 36.6641,40.7708L 39.8307,37.6042 Z " Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
<ContentPresenter Content="{TemplateBinding Header}" Margin="20,5,10,5">
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="FontSize" Value="18" />
<Setter Property="FontWeight" Value="Light" />
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
<Setter Property="TabStripPlacement" Value="Left" />
<Setter Property="ItemContainerStyle" Value="{StaticResource ItemContainerStyle}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Padding="5">
<Border.Background>
<LinearGradientBrush EndPoint="0,0" StartPoint="1,0">
<GradientStop Color="#FFC7C7C7" Offset="0"/>
<GradientStop Color="#FFECECEC" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<DockPanel>
<Image DockPanel.Dock="Bottom" HorizontalAlignment="Center" Margin="20" Source="pack://application:,,,/StackOverflowTabControl;component/twc.png" Width="200" />
<TabPanel x:Name="headerPanel" Background="Transparent" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
</DockPanel>
</Border>
<Border x:Name="contentPanel" Grid.Column="1" Margin="5,0,0,0">
<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TabControl Style="{DynamicResource TabControlStyle1}">
<TabItem Header="System Information">
<TextBlock Text="Windows 10 pro" />
</TabItem>
<TabItem Header="Something else">
<TextBlock Text="Other page" />
</TabItem>
</TabControl>
</Grid>
</Window>
I'm currently trying to apply styling to my menuItem. I had to center it's header inside the control, and the only way to it that I had found is this:
<MenuItem>
<MenuItem.Header>
<TextBlock Text="About" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</MenuItem.Header>
</MenuItem>
Now, I am trying to apply styles, but I can't seem to manage to bind the textboxes' text from style to the actual xaml value.
My style:
<Style x:Key="MenuItemBaseStyle" TargetType="MenuItem">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="#0a99f3" />
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Grid Background="{TemplateBinding Background}">
<MenuItem>
<MenuItem.Header>
<TextBlock Text="{TemplateBinding Text}" />
</MenuItem.Header>
</MenuItem>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
TemplateBinding is just one of the approaches I tried, though none worked even remotely close.
EDIT - FULL XAML ON REQUEST:
<Window x:Class="DownloadManager.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:DownloadManager"
xmlns:controls="clr-namespace:DesignInControl"
mc:Ignorable="d"
Title="MainWindow" Height="700" Width="1000" Background="#22282a" ResizeMode="NoResize">
<Border BorderThickness="1" BorderBrush="#ffcd22" Margin="10,10,10,10">
<Grid>
<controls:CircularProgressBar VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,10,10" SegmentColor="#ffcd22" StrokeThickness="5" Percentage="100" Radius="80" Grid.ZIndex="0"/>
<Border VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,10,10" Width="170" Height="170">
<TextBlock FontSize="60" Text="10%" FontFamily="simplifica" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Image x:Name="noshare_png" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="-8,10" Source="noshare.png" Width="100" Height="100"/>
<Border Width="210" Height="100" Margin="97,10,665,540">
<TextBlock Text="NoShare" FontSize="85" FontFamily="simplifica" Foreground="#ffcd22" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
<Menu x:Name="menu" HorizontalAlignment="Left" Height="100" Margin="352,10,0,0" VerticalAlignment="Top" Width="600" FontFamily="simplifica" FontSize="30">
<MenuItem Height="100" Width="200" Style="{StaticResource MenuItemBaseStyle}">
<MenuItem.Header>
<TextBlock Text="File"/>
</MenuItem.Header>
</MenuItem>
<MenuItem Height="100" Width="200" Style="{StaticResource MenuItemBaseStyle}">
<MenuItem.Header>
<TextBlock Text="Settings"/>
</MenuItem.Header>
</MenuItem>
<MenuItem Height="100" Width="200" Style="{StaticResource MenuItemBaseStyle}">
<MenuItem.Header>
<TextBlock Text="About"/>
</MenuItem.Header>
</MenuItem>
</Menu>
</Grid>
</Border>
</Window>
Use MenuItem.HeaderTemplate.
<Style x:Key="MenuItemBaseStyle" TargetType="MenuItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="#0a99f3" />
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
Updated: Combined your style with the original solution.
My requirement is to group datagrid rows based on a condition and display the grouped rows in alternating colours along with an edit button for each group. The problem here is my datagrid Column headers are not aligning with the Data grid data rows .
Current Grid
I have already gone through a lot of posts with not much help I have tried this post as well WPF DataGrid GroupStyle . This example has group style for a grid but I tried to do the same for a datagrid.
Current XAML
<Window x:Class="TimeSeriesDataGrid.View.TimeSeriesView"
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"
mc:Ignorable="d" Width="Auto" Height="Auto"
xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
xmlns:viewmodel="clr-namespace:TimeSeriesDataGrid.ViewModel"
xmlns:converter="clr-namespace:TimeSeriesDataGrid.Converters"
xmlns:local="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WPF45"
xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WPF45"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" Title="{Binding WindowTitle}" ResizeMode="CanMinimize">
<Window.DataContext>
<viewmodel:TimeSeriesViewModel />
</Window.DataContext>
<Window.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="#FFEEEFFF" Offset="0.836"/>
</LinearGradientBrush>
</Window.Background>
<Window.Resources>
<converter:RowColorConverter x:Key="RowColorConverter" />
<CollectionViewSource x:Key="TimeSeriesCollectionViewSource" CollectionViewType="ListCollectionView" Source="{Binding GetTimeSeries}" >
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="DocumentId"/>
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
</Window.Resources>
<Grid Margin="0,0,0,-3">
<Grid.RowDefinitions>
<RowDefinition Height="8*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<DataGrid
DataContext="{StaticResource TimeSeriesCollectionViewSource}"
SelectedItem="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.SelectedTimeSeries}"
ItemsSource="{Binding}"
CanUserReorderColumns="False"
SnapsToDevicePixels="True"
Grid.Column="0"
Grid.Row="0"
x:Name="dg_TimeSeriesEdit"
AutoGenerateColumns="False"
CanUserResizeColumns="False"
ScrollViewer.IsDeferredScrollingEnabled="True"
VirtualizingStackPanel.IsVirtualizing="true"
HeadersVisibility="Column"
HorizontalContentAlignment="Center"
CanUserAddRows="False"
CanUserDeleteRows="False"
MaxHeight="800"
MaxWidth="2550"
HorizontalGridLinesBrush="#FFC92222"
VerticalGridLinesBrush="#FFC92222"
Width="Auto"
Height="Auto" >
<DataGrid.GroupStyle>
<GroupStyle AlternationCount="2" >
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" Background="Transparent">
<Button Grid.Column="0" BorderThickness="0" Content="Edit" Margin="0,0,0,5" Height="Auto" Width="50" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<local:EventToCommand Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.EditGroupCmd}" CommandParameter="{Binding Path=Items}" PassEventArgsToCommand="True" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</StackPanel>
<ItemsPresenter />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</DataGrid.GroupStyle>
<DataGrid.RowStyle>
<Style>
<Setter Property="DataGridRow.Background"
Value="{Binding RelativeSource={RelativeSource AncestorType=GroupItem},
Path=(ItemsControl.AlternationIndex), Converter={StaticResource RowColorConverter}}"/>
</Style>
</DataGrid.RowStyle>
<DataGrid.Columns >
.
.
</DataGrid.Columns>
</DataGrid>
</Grid>
</Grid>
</Window>
Any Help would be appreciated.
I managed to allign the header with data after TranslateTransform on datagridcolumn header
<DataGrid.ColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform X="50"></TranslateTransform>
</Setter.Value>
</Setter>
</Style>
</DataGrid.ColumnHeaderStyle>
<DataGrid.RowValidationErrorTemplate>
These are all ListViews. They all will contain max 5 items. I want them to fill vertically, so in this case these three items should cover 3/5 of the ListView how can I do that? Of course when the Window is resized the items must change to.
http://s14.directupload.net/images/140423/c5mayx9t.png
<Grid.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border BorderBrush="#5076A7" BorderThickness="1" CornerRadius="4">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FFFFFF" Offset="0.0"/>
<GradientStop Color="#C0D3EA" Offset="1.0"/>
</LinearGradientBrush>
</Border.Background>
<StackPanel TextElement.FontFamily="Segoe UI" TextElement.FontSize="12">
<TextBlock FontWeight="Bold" Padding="3,0,0,0" Text="{Binding Path=Name}"/>
<TextBlock Padding="3,0,0,0" Text="{Binding Path=Age}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</Grid.Resources>
You can use a UniformGrid:
<ListView>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="5" Columns="1" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
I have found some example code that creates a gradient fill in a WPF rectangle control:
<Rectangle Height="{Binding ElementName=txtName}" Width="{Binding ElementName=txtName}">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="Silver" Offset="0.0" />
<GradientStop Color="Black" Offset="0.5" />
<GradientStop Color="white" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
I have some written some code that displays a collection of ListBox's that contain details from MyObject:
<UserControl.Resources>
<DataTemplate x:Key="CustomerTemplate">
<Border BorderThickness="2" BorderBrush="Silver" CornerRadius="5" Padding="1" Height="50">
<Grid x:Name="thisGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" >
<Image Source="C:\MyImage.jpg" Height="50" Width="100" ></Image>
</StackPanel>
<Border Grid.Column="1" Margin="0" Padding="0">
<StackPanel Orientation="Vertical">
<TextBlock Name="txtName" Text="{Binding Name}" Background="Silver" Foreground="Black" FontSize="16" FontWeight="Bold" Height="25"/>
</StackPanel>
</Border>
</Grid>
</Border>
</DataTemplate>
</UserControl.Resources>
<ListBox ItemsSource="{Binding}" ItemTemplate="{StaticResource CustomerTemplate}"
Name="grdList" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" >
</ListBox>
I would like to apply the same stlye of fill that i get with the first example, in each of my ListBox's. I can't quite figure out how to do this. Can anyone help?
Thanks
Have you looked at setting the background fill of the item containers using the ItemContainerStyle property of ListBox?
Since you can change ControlTemplate of your ListBox like in the example here http://msdn.microsoft.com/en-us/library/ms754242(VS.85).aspx, you can write something like this
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Style x:Key="{x:Type ListBox}" TargetType="ListBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border
Name="Border"
BorderThickness="1"
CornerRadius="20" Style="{DynamicResource DynamicGridBrush}">
<ScrollViewer Margin="0" Focusable="false">
<StackPanel Margin="2" IsItemsHost="True" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Border" x:Key="DynamicGridBrush">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="LightBlue" />
<GradientStop Offset="0.65" Color="LightGreen" />
<GradientStop Offset="1" Color="White" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style></Page.Resources>
<Grid>
<ListBox>
<TextBlock>aaa</TextBlock>
<TextBlock>bbb</TextBlock>
<TextBlock>ccc</TextBlock>
</ListBox>
</Grid>
</Page>
If I understood your question and you would like to apply gradient background to your whole listbox.