What I'm trying to do is a combobox that have the favorite values on top, with a different background color and button. Right now I have:
<UserControl x:Class="ComboBoxWithButton"
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"
Name="root"
d:DesignWidth="300" Height="25">
<ComboBox
x:Name="ComboBoxBtn"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Margin="0,0,0,-1"
Width="300"
ItemsSource="{Binding Source, RelativeSource={RelativeSource AncestorType=UserControl}}"
SelectedItem="{Binding Path=Selected, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=UserControl}}">
<ComboBox.Resources>
<Style TargetType="ComboBoxItem">
????
</Style>
</ComboBox.Resources>
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Background" Value="#FFE6E6FA"/>
</Style>
</Grid.Style>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Content="{Binding}" Width="250" />
<Button Grid.Column="1" Command="{Binding CommandButton, ElementName=root}"
CommandParameter="{Binding}">+</Button>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</UserControl>
Right now I have an Add button so I can add my items as favorites. But what I want now is, based on the item I represent it as favorite or not.
Case is a favorite have a different background color an a [-] button (to remove). Case is not the background is white as usual and have a [+].
See if a ContentControl helps you here in place of where you are using a Button.
<ComboBox.ItemTemplate>
<DataTemplate>
<ContentControl>
<Style TargetType="ContentControl">
<Style.Triggers>
<DataTrigger Binding="{Binding ...}" Value="True">
<Setter Property="Content">
<Setter.Value>
<Grid>
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Background" Value="#FFE6E6FA"/>
</Style>
</Grid.Style>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Content="{Binding}" Width="250" />
<Button Grid.Column="1" Command="{Binding CommandButton, ElementName=root}"
CommandParameter="{Binding}">+</Button>
</Grid>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding ...}" Value="False">
<Setter Property="Content">
<Setter.Value>
<Grid>
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Background" Value="Yellow"/>
</Style>
</Grid.Style>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Content="{Binding}" Width="250" />
<Button Grid.Column="1" Command="{Binding CommandButton, ElementName=root}"
CommandParameter="{Binding}">-</Button>
</Grid>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl>
</DataTemplate>
</ComboBox.ItemTemplate>
Related
I want to change the color of items inside the Windows.Resources when click a Button.
<Window.Resources>
<DataTemplate x:Key="Listboxcmmt">
<Border>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="txtbox1" Text="{Binding U_Name}" Foreground="#072D55"/>
</StackPanel>
</Border>
</DataTemplate>
</Window.Resources>
binding to
<ListBox x:Name="lb_listcmmts" ItemsSource="{Binding Tables[0]}" ItemTemplate="{StaticResource Listboxcmmt}">
<ListBox.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="4"/>
</Style>
</ListBox.Resources>
</ListBox>
I have little Knowledge about Data Binding, wondering if there is a another way.
private void Btn_clicked (object ...)
{
txtbox1.Foreground = Brushes.White;
}
First, I made a ToggleButton instead of Button.
<ToggleButton x:Name="btn" Grid.Column="1" Content="Change Color"
Width="100" Height="50" Margin="30" VerticalAlignment="Top"/>
And in DataTemplate, you have to use Trigger.
<Window.Resources>
<DataTemplate x:Key="Listboxcmmt">
<Border>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="txtbox1" Text="{Binding U_Name}" Foreground="#072D55"/>
</StackPanel>
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName=btn, Path=IsChecked}" Value="True">
<Setter TargetName="txtbox1" Property="Foreground" Value="Red"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Window.Resources>
MainWindow.xaml
<Window x:Class="ListBoxTriggerSample.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:ListBoxTriggerSample"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<DataTemplate x:Key="Listboxcmmt">
<Border >
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="txtbox1" Text="{Binding U_Name}" Foreground="#072D55"/>
</StackPanel>
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName=btn, Path=IsChecked}" Value="True">
<Setter TargetName="txtbox1" Property="Foreground" Value="Red"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ListBox x:Name="lb_listcmmts" ItemsSource="{Binding Tables[0]}" ItemTemplate="{StaticResource Listboxcmmt}">
<ListBox.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="4"/>
</Style>
</ListBox.Resources>
</ListBox>
<ToggleButton x:Name="btn" Grid.Column="1" Content="Change Color" Width="100" Height="50" Margin="30" VerticalAlignment="Top"/>
</Grid>
</Window>
When ToggleButton unchecked.
Foreground="#072D55"
When ToggleButton checked.
Foreground="Red"
Instead of hardcoding the colour in the template, you could set the Foreground using the DynamicResource markup extension and just add another resource that defines the colour:
<Window.Resources>
<SolidColorBrush x:Key="foreground" Color="#072D55" />
<DataTemplate x:Key="Listboxcmmt">
<Border>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="txtbox1" Text="{Binding U_Name}"
Foreground="{DynamicResource foreground}"/>
</StackPanel>
</Border>
</DataTemplate>
</Window.Resources>
Then it's simply a matter of replacing the resource:
private void Button_Click(object sender, RoutedEventArgs e)
{
Resources["foreground"] = Brushes.White;
}
I want my ListViewItem to look like this. As you can see when the ListViewItem is selected/has focus the Border should change color.
The Main Problem is that I can't put a Border around the ContenPresenter in the ControlTemplate because than also the TextBox with the "Description"-Binding will be inside the Border. But I only want the TextBox and Icon to be inside the Border that changes Colors and not also the Description ("Nachname", "Vorname").
This is the XAML I have so far. I don't know how to change the border in the ControlTemplate:
<ListView x:Name="SearchFields" Grid.Row="0" Grid.Column="0" ItemsSource="{Binding CustomerSearchFields}" SelectedItem="{Binding selectedSearchField, UpdateSourceTrigger=LostFocus}" Style="{StaticResource MaterialDropShadowStyle}"
BorderThickness="0,0,2,0" Padding="24,24,24,0" HorizontalContentAlignment="Stretch" helper:EnterKeyTraversal.IsEnabled="True" KeyboardNavigation.TabNavigation="Cycle" FontFamily="{StaticResource DefaultFontFamily}"
Background="{StaticResource ColorLightGray2}">
<ListView.Resources>
<DataTemplate DataType="{x:Type model:CustomerSeachFieldViewModel}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="48" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Description}" FontSize="{StaticResource FontSizeSmall}" FontWeight="SemiBold" Foreground="{StaticResource ColorDarkGray}" Margin="0,0,0,4" />
<Border x:Name="PART_Border" Grid.Row="1" BorderThickness="1" BorderBrush="{StaticResource ColorGray}">
<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="48" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Text="{Binding SearchText}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" FontSize="{StaticResource FontSizeNormal}" Padding="12,15" BorderThickness="0" />
<Border Grid.Column="1" Background="{StaticResource ColorLightGray2}" Margin="8">
<ctrl:IconViewbox IconData="{StaticResource IconPathSearch}" IconSize="16" IsTabStop="False" />
</Border>
</Grid>
</Border>
</Grid>
</DataTemplate>
</ListView.Resources>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Margin" Value="0,0,0,24" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter Content="{Binding}" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="IsSelected" Value="True" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Trigger.Setters>
<Setter Property="BorderBrush" Value="Fuchsia" />
</Trigger.Setters>
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
</ListView>
You can add a Trigger to your Border named PART_Border as follow:
<Border x:Name="PART_Border" Grid.Row="1" BorderThickness="1" >
<Border.Style>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="DarkGray" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListViewItem}}}"
Value="True" >
<Setter Property="BorderBrush" Value="Black"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="48" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0"
Text="{Binding SearchText}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" FontSize="15" Padding="12,15" BorderThickness="0" />
<Border Grid.Column="1" Background="Gray" Margin="8">
<Rectangle Width="20" Height="20" />
</Border>
</Grid>
</Border>
Please note that I replaced some StaticResource mapped to some Colors from your code with standard color in order to test my code.
I also replaced the icon with a Rectangle for the same reason.
Try for your IsSelected trigger:
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="PART_Border" Property="BorderBrush" Value="Fuchsia" />
<Setter TargetName="PART_Border" Property="BorderThickness" Value="1" />
</Trigger>
You could add a Style with a DataTrigger that binds to the IsSelected property of the parent ListViewItem to the Border in your DataTemplate:
<Border x:Name="PART_Border" Grid.Row="1" BorderThickness="1">
<Border.Style>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="{StaticResource ColorGray}" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem}}"
Value="True">
<Setter Property="BorderBrush" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
Note that you need to set the default value of the property ({StaticResource ColorGray}) using a Style setter for the DataTrigger to be able to set the property when the ListViewItem is selected.
I am not good at WPF and I am struggling with this a bit. I have a WPF window that has the following code:
<ContentControl.Content>
<Button Name="btnUpdateCommand" HorizontalAlignment="Right" Grid.Row="2" Command="{Binding UpdateCommand}" Height="23" Margin="0,4">
<StackPanel Orientation="Horizontal" Name="txtUpdate" HorizontalAlignment="Right">
<TextBlock Text="{Binding InstallButtonText}" DockPanel.Dock="Right" Margin="5,2,0,0" HorizontalAlignment="Right"></TextBlock>
<TextBlock Text="{Binding FormCloseCountDown}" DockPanel.Dock="Right" Margin="5,2,0,0"></TextBlock>
</StackPanel>
</Button>
</ContentControl.Content>
How do a resize btnUpdateCommand when I have localization text. I tried changing the alignment of the TextBlock etc. but no joy.
As an example this is what the button look like when it has english
And this is what the button looks like when it has french
What am I missing?
Here is the entrie XAML:
<UserControl x:Class="UpdateCheckModule.UpdateCheckProgress"
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"
d:DesignHeight="300" d:DesignWidth="300"
Height="250" Width="500">
<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="175"></RowDefinition>
<RowDefinition Height="10"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
<ContentControl Grid.Row="0">
<ContentControl.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="95"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="23"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" Grid.Row="0" FontSize="18" />
<TextBlock Text="{Binding Status}" Grid.Row="1" />
<Border Grid.Row="2" BorderThickness="1" BorderBrush="DarkGray">
<ProgressBar Value="{Binding ProgressPercentage}" Foreground="#FF10AAE7"></ProgressBar>
</Border>
</Grid>
</ContentControl.Content>
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="Visibility" Value="Visible"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding HideProgress}" Value="True">
<Setter Property="Visibility" Value="Collapsed"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
<ContentControl Grid.Row="0">
<ContentControl.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="115"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" Grid.Row="0" FontSize="18" />
<Image Source="pack://application:,,,/UpdateCheckModule;component/sedv2.ico" Grid.Column="1"></Image>
<TextBlock Text="{Binding ReleaseNotesText}" Grid.Row="1" Grid.ColumnSpan="2"/>
<Border BorderThickness="1" BorderBrush="DarkGray" Grid.Row="2" Grid.ColumnSpan="2">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<TextBlock Text="{Binding DeploymentManifest.ReleaseNotes}" Background="White" Margin="5"></TextBlock>
</ScrollViewer>
</Border>
</Grid>
</ContentControl.Content>
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="Visibility" Value="Collapsed"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding HideProgress}" Value="True">
<Setter Property="Visibility" Value="Visible"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
<Button Name="btnSkip" HorizontalAlignment="Left" Grid.Row="2" Content="{Binding SkipButtonText}" Width="100" Command="{Binding SkipCommand}" Height="23">
</Button>
<ContentControl Grid.Row="2">
<ContentControl.Content>
<Button Name="btnUacRestartCommand" HorizontalAlignment="Right" Grid.Row="2" Width="175" Command="{Binding UacRestartCommand}" Height="23">
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Shield}" DockPanel.Dock="Left"></Image>
<TextBlock Text="{Binding AdminInstallButtonText}" DockPanel.Dock="Right" Margin="5,2,0,0"></TextBlock>
<TextBlock Text="{Binding FormCloseCountDown}" DockPanel.Dock="Right" Margin="5,2,0,0"></TextBlock>
</StackPanel>
</Button>
</ContentControl.Content>
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="Visibility" Value="Collapsed"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding RequireUAC}" Value="True">
<Setter Property="Visibility" Value="Visible"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
<ContentControl Grid.Row="2">
<ContentControl.Content>
<Button Name="btnUpdateCommand" HorizontalAlignment="Right" Grid.Row="2" Width="175" Command="{Binding UpdateCommand}" Height="23">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding InstallButtonText}" DockPanel.Dock="Right" Margin="5,2,0,0"></TextBlock>
<TextBlock Text="{Binding FormCloseCountDown}" DockPanel.Dock="Right" Margin="5,2,0,0"></TextBlock>
</StackPanel>
</Button>
</ContentControl.Content>
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="Visibility" Value="Visible"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding RequireUAC}" Value="True">
<Setter Property="Visibility" Value="Collapsed"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</Grid>
You're explicitly setting the Width of the Button (to 175). Remove this attribute; this will allow the Button to determine its own optimal width.
While you're at it, remove the DockPanel.Dock attributes on the TextBlocks; these attributes do nothing since the TextBlocks are inside a StackPanel, not a DockPanel.
I have the following data template in my listbox:
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#FF575757" BorderThickness="0,0,0,1">
<Grid HorizontalAlignment="Stretch" Tag="{Binding}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Icon"/>
<ColumnDefinition Width="*" SharedSizeGroup="Name"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image x:Name="DeviceIcon" DataContext="{Binding Path=device}" Source="{Binding Path=StatusIcon}" Width="64" Height="64" Grid.Column="0" Grid.RowSpan="2" RenderOptions.BitmapScalingMode="HighQuality" Margin="3"></Image>
<StackPanel Grid.Column="1" >
<TextBlock x:Name="DeviceName" DataContext="{Binding Path=device}" Text="{Binding Path=DeviceName}" FontWeight="Bold" Foreground="#FF00008F" FontSize="14.667"/>
<TextBlock x:Name="PluginName" Text="{Binding Path=PluginName}" />
</StackPanel>
<Menu x:Name="MainMenu" VerticalAlignment="Top" Padding="0,3" Grid.Column="1" Grid.Row="1" ItemsSource="{Binding deviceMenu}">
<Menu.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Items}">
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<Image Source="{Binding Icon}" Width="16" Height="16">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding Icon}" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<TextBlock Text="{Binding Text}"/>
</StackPanel>
</HierarchicalDataTemplate>
</Menu.ItemTemplate>
<Menu.ItemContainerStyle>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Command" Value="{Binding ClickCommand}" />
<Setter Property="CommandParameter" Value="{Binding device}" />
</Style>
</Menu.ItemContainerStyle>
</Menu>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
The MenuItem's are bound to a property named deviceMenu in the root object. But the root object also contains a property called device which needs to be mapped to the CommandParameter property.
So how do I reach up and out of deviceMenu back to the parent object to access its properties?
Blame it on fatigue... The answer was pretty simple:
<Setter Property="CommandParameter" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=DataContext.device}" />
I m creating Windows Phone 8.1 app with Visual Studio Where I m putting XAML grid but could not make full width. If I give width to each column then grid will be not full width in all resolution of Phone
My codes are as below
<ListView Name="lvData" Margin="5,0" HorizontalAlignment="Stretch" Grid.Row="2" BorderBrush="Black"
BorderThickness="1" Foreground="#000" VerticalAlignment="Center">
<ListView.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
</Grid.ColumnDefinitions>
<GridViewHeaderItem Grid.Column="0" x:Uid="_Number" Style="{StaticResource GridViewHeader}" />
<GridViewHeaderItem Grid.Column="1" x:Uid="_Dep" Style="{StaticResource GridViewHeader}" />
<GridViewHeaderItem Grid.Column="2" x:Uid="Arr" Style="{StaticResource GridViewHeader}" />
<GridViewHeaderItem Grid.Column="3" x:Uid="CurrentStatus" Style="{StaticResource GridViewHeader}" />
</Grid>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
</Grid.ColumnDefinitions>
<GridViewItem Grid.Column="0" Style="{StaticResource GridViewItem}" Content="{Binding Number}"/>
<GridViewItem Grid.Column="1" Style="{StaticResource GridViewItem}" Content="{Binding DepTime}" />
<GridViewItem Grid.Column="2" Style="{StaticResource GridViewItem}" Content="{Binding ArrTime}"/>
<GridViewItem Grid.Column="3" Style="{StaticResource GridViewItem}" Foreground="{Binding Color}" Content="{Binding CurrentStatus}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
My Style
<Style TargetType="GridViewHeaderItem" x:Key="GridViewHeader">
<Setter Property="Background" Value="#48649F"/>
<Setter Property="Foreground" Value="#fff"/>
<Setter Property="Height" Value="40"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
</Style>
<Style TargetType="GridViewItem" x:Key="GridViewItem">
<Setter Property="Foreground" Value="#000"/>
<Setter Property="BorderBrush" Value="#000"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Height" Value="40"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
Try stretch HorizontalContentAlignment of ListViewItem:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
...
</ListView>