hello I want to use nested border. I want it to appear when ALT is true and not when it is false. However, when false, outMSG or sentMSG closes on borders, how can I fix it?
hello I want to use nested border. I want it to appear when ALT is true and not when it is false. However, when false, outMSG or sentMSG closes on borders, how can I fix it?
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" >
<Image Grid.Column="0" x:Name="sentimage" Source="Images/Icon/user.png" Margin="5" Width="15" Height="15" VerticalAlignment="Bottom"/>
<Border Grid.Column="0" MaxWidth="500" x:Name="sentMsg" Margin="0" BorderThickness="0" BorderBrush="#ffffff" Background="#ffffff" CornerRadius="10">
<Border MaxWidth="500" x:Name="AlMsg2" Grid.Column="0" Margin="0" BorderThickness="0" BorderBrush="#d9fdd3" Background="#d9fdd3" CornerRadius="10">
<TextBlock Grid.Column="0" Background="#d9fdd3" Foreground="Black" TextAlignment="Left" TextWrapping="Wrap" Margin="5" FontSize="14">
<Underline><Run FontWeight="Bold" FontSize="12" Text="{Binding FROM_ME}"/></Underline>
<LineBreak/>
<Label Margin="-3,0,0,0" Content="{Binding GRD}" ></Label>
<LineBreak/>
<Label Foreground="#09a0f7" FontSize="12" Content="{Binding ZMN}" ></Label>
<LineBreak/>
<TextBlock Grid.Column="0" Background="#ffffff" Foreground="Black" TextAlignment="Left" TextWrapping="Wrap" Margin="5" FontSize="14">
<Underline><Run FontWeight="Bold" FontSize="12" Text="{Binding FROM_ME}"/></Underline>
<LineBreak/>
<Label Margin="-3,0,0,0" Content="{Binding GRD}" ></Label>
<LineBreak/>
<Label Foreground="#09a0f7" FontSize="12" Content="{Binding ZMN}" ></Label>
</TextBlock>
</TextBlock>
</Border>
</Border>
<Border MaxWidth="500" x:Name="outMsg" Grid.Column="0" Margin="0" BorderThickness="0" BorderBrush="#d9fdd3" Background="#d9fdd3" CornerRadius="10">
<Border MaxWidth="500" x:Name="AlMsg" Grid.Column="0" Margin="0" BorderThickness="0" BorderBrush="#ffffff" Background="#ffffff" CornerRadius="10">
<TextBlock Grid.Column="0" Background="#ffffff" Foreground="Black" TextAlignment="Left" TextWrapping="Wrap" Margin="5" FontSize="14">
<Underline><Run FontWeight="Bold" FontSize="12" Text="{Binding FROM_ME}"/></Underline>
<LineBreak/>
<Label Margin="-3,0,0,0" Content="{Binding GRD}" ></Label>
<LineBreak/>
<Label Foreground="#09a0f7" FontSize="12" Content="{Binding ZMN}" ></Label>
<LineBreak/>
<TextBlock Grid.Column="0" Background="#d9fdd3" Foreground="Black" TextAlignment="Left" TextWrapping="Wrap" Margin="5" FontSize="14">
<Underline><Run FontWeight="Bold" FontSize="12" Text="{Binding FROM_ME}"/></Underline>
<LineBreak/>
<Label Margin="-3,0,0,0" Content="{Binding GRD}" ></Label>
<LineBreak/>
<Label Foreground="#09a0f7" FontSize="12" Content="{Binding ZMN}" ></Label>
<LineBreak/>
</TextBlock>
</TextBlock>
</Border>
</Border>
<Image Grid.Column="0" x:Name="outimage" Source="Images/Icon/user.png" Margin="5" Width="15" Height="15" VerticalAlignment="Bottom"/>
</StackPanel>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding GNDRN}" Value="1">
<Setter Property="Visibility" TargetName="sentimage" Value="Hidden"/>
<Setter Property="Visibility" TargetName="sentMsg" Value="Hidden"/>
<Setter Property="HorizontalAlignment" Value="Left"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding GNDRN}" Value="0">
<Setter Property="Visibility" TargetName="outimage" Value="Hidden"/>
<Setter Property="Visibility" TargetName="outMsg" Value="Hidden"/>
<Setter Property="HorizontalAlignment" Value="Right"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding ALNT}" Value="true">
<Setter Property="Visibility" TargetName="AlMsg" Value="Hidden"/>
<Setter Property="Visibility" TargetName="AlMsg2" Value="Hidden"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
Related
I wrote a documentviewer style (below) and I came into a problem with first two buttons - both of them, when disabled has lightgray-ish colour of background and gray foreground. How do I make them transparent when disabled? I tried to put transparency everywhere possible with no success. Those triggers at the bottom does not work. Thanks in advance.
<Style x:Key="{x:Type DocumentViewer}"
TargetType="{x:Type DocumentViewer}">
<Setter Property="Foreground"
Value="Transparent" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="FocusVisualStyle"
Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DocumentViewer}">
<Border BorderThickness="0.4"
BorderBrush="White"
Focusable="False">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.Background>
<SolidColorBrush Color="Transparent" />
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ToolBar ToolBarTray.IsLocked="True" Height="50" Background="Transparent" Foreground="Transparent"
KeyboardNavigation.TabNavigation="Continue" BorderThickness="0.8" BorderBrush="White">
<StackPanel Orientation="Horizontal">
<Button Command="ApplicationCommands.Print" BorderThickness="0" Background="Transparent"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource Buttondefault}"
Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Printer" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Print" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Button Command="ApplicationCommands.Copy" BorderThickness="0" Background="Transparent"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="ContentCopy" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Copy" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Separator/>
<Button Command="NavigationCommands.IncreaseZoom" BorderThickness="0" Background="Transparent" Foreground="WhiteSmoke"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="ZoomIn" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Zoom In" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Button Command="NavigationCommands.DecreaseZoom" BorderThickness="0" Background="Transparent" Foreground="WhiteSmoke"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="ZoomOut" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Zoom Out" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Separator />
<Button Command="NavigationCommands.Zoom" BorderThickness="0" Background="Transparent" Foreground="WhiteSmoke"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
CommandParameter="100.0"
Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="PageLayoutFooter" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Actual Size" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Button Command="DocumentViewer.FitToWidthCommand" BorderThickness="0" Background="Transparent" Foreground="WhiteSmoke"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="FitToPageOutline" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Fit To Width" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Button Command="DocumentViewer.FitToMaxPagesAcrossCommand" BorderThickness="0" Background="Transparent" Foreground="WhiteSmoke"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
CommandParameter="1" Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="PageLayoutMarginals" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Whole Page" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Button Command="DocumentViewer.FitToMaxPagesAcrossCommand" BorderThickness="0" Background="Transparent" Foreground="WhiteSmoke"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
CommandParameter="2" Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="TableSplitCell" Height="20" Width="20" Margin="0,5,0,0" RenderTransformOrigin="5,5"/>
<TextBlock Text="Two Pages" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
</StackPanel>
</ToolBar>
<ScrollViewer Grid.Row="1"
CanContentScroll="true"
HorizontalScrollBarVisibility="Auto"
x:Name="PART_ContentHost"
IsTabStop="true">
<ScrollViewer.Background>
<SolidColorBrush Color="Transparent"/>
</ScrollViewer.Background>
</ScrollViewer>
<ContentControl Grid.Row="2"
x:Name="PART_FindToolBarHost"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter Property="Background" Value="#623ed0"/>
<Setter Property="Foreground" Value="WhiteSmoke"/>
</Trigger>
<Trigger Property="Button.IsEnabled" Value="False">
<Setter Property="Foreground" Value="Gray"/>
<Setter Property="Background" Value="Transparent"/>
</Trigger>
<Trigger Property="Button.IsEnabled" Value="True">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
hi i want to change the default mouse over color of ListViewItems in WPF and i tried this code to change the default mouse over color here is my code
<ListView x:Name="lv"
Background="Transparent"
BorderBrush="Transparent"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Margin="0,20,0,0"
>
<!--home-->
<ListViewItem HorizontalAlignment="Left"
Style="{StaticResource lv_font}"
Height="60" MouseEnter="ListViewItem_MouseEnter"
>
<StackPanel Orientation="Horizontal"
Width="230"
Margin="-6,0,0,0"
Height="60"
>
<Image Source="/Assert/alarms_home.ico"
Stretch="None"
Margin="7,0,0,0"
VerticalAlignment="Center"
/>
<TextBlock Text="خانه"
Margin="50,0,0,0"
VerticalAlignment="Center"
/>
</StackPanel>
<!--tooltip-->
<ListViewItem.ToolTip>
<ToolTip x:Name="tt_home"
Content="خانه"
Style="{StaticResource tt_style}"/>
</ListViewItem.ToolTip>
</ListViewItem>
<!--alarms-->
<ListViewItem HorizontalAlignment="Left"
Style="{StaticResource lv_font}"
Margin="0,20,0,0"
Height="60"
MouseEnter="ListViewItem_MouseEnter"
>
<StackPanel Orientation="Horizontal"
Width="230"
Margin="-6,0,0,0"
Height="60"
>
<Image Source="/Assert/icons8_alarm_on_1.ico"
Stretch="None"
Margin="7,0,0,0"
VerticalAlignment="Center"/>
<TextBlock Text="یادداشت ها"
Margin="50,0,0,0"
VerticalAlignment="Center"
/>
</StackPanel>
<!--tooltip-->
<ListViewItem.ToolTip>
<ToolTip x:Name="tt_alarms"
Content="یادداشت ها"
Style="{StaticResource tt_style}"/>
</ListViewItem.ToolTip>
</ListViewItem>
<!--add notes-->
<ListViewItem HorizontalAlignment="Left"
Style="{StaticResource lv_font}"
Margin="0,20,0,0"
Height="60"
MouseEnter="ListViewItem_MouseEnter"
>
<StackPanel Orientation="Horizontal"
Width="230"
Margin="-6,0,0,0"
Height="60"
>
<Image Source="/Assert/alarm_add_1.ico"
Stretch="None"
Margin="7,0,0,0"
VerticalAlignment="Center"/>
<TextBlock Text="افزودن"
Margin="50,0,0,0"
VerticalAlignment="Center"
/>
</StackPanel>
<!--tooltip-->
<ListViewItem.ToolTip>
<ToolTip x:Name="tt_add"
Content="افزودن"
Style="{StaticResource tt_style}"/>
</ListViewItem.ToolTip>
</ListViewItem>
<!--about us-->
<ListViewItem HorizontalAlignment="Left"
Style="{StaticResource lv_font}"
Margin="0,20,0,0"
Height="60"
MouseEnter="ListViewItem_MouseEnter"
>
<StackPanel Orientation="Horizontal"
Width="230"
Margin="-6,0,0,0"
Height="60"
>
<Image Source="/Assert/icons8_about_5.ico"
Stretch="None"
Margin="7,0,0,0"
VerticalAlignment="Center"
/>
<TextBlock Text="درباره ما"
Margin="50,0,0,0"
VerticalAlignment="Center"
/>
</StackPanel>
<!--tooltip-->
<ListViewItem.ToolTip>
<ToolTip x:Name="tt_about"
Content="درباره ما"
Style="{StaticResource tt_style}"/>
</ListViewItem.ToolTip>
</ListViewItem>
<!--style-mouse-over for list-->
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Bd1"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True"
>
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
/>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver"
Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background"
TargetName="Bd1"
Value="#B5C1B4"/>
<Setter Property="BorderBrush"
TargetName="Bd1"
Value="#B5C1B4"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
But it is not worked, I did not get any error but it is not changed the default color if you have any other idea or this code is wrong please tell me.
Thanks
I have a WPF WrapPanel that is oriented horizontally. When I add add children like Grid controls, they all have the same height. How can I make different children to have different height? Is it possible to make it without using any third party software? I have tried to implement WPF Masonry, but it had a lot of errors and I gave up on that one.
For example, if my first Grid has 3 rows and the second one has 6 rows, the first one stretches to the height of the second Grid.
This is what I have right now:
And this is what I am trying to achieve:
EDIT:
My XAML:
<WrapPanel Background="White" Height="200">
<Grid Style="{StaticResource grdRate}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0" Grid.Column="0" Style="{StaticResource brdRate}">
<Label Content="Content" Style="{StaticResource lblRateBold}"></Label>
</Border>
<Border Grid.Row="0" Grid.Column="1" Style="{StaticResource brdRate}">
<Label Content="1" Style="{StaticResource lblRateBold}"></Label>
</Border>
<Border Grid.Row="0" Grid.Column="2" Style="{StaticResource brdRate}">
<Label Content="Content" Style="{StaticResource lblRateBold}"></Label>
</Border>
<Border Grid.Row="0" Grid.Column="3" Style="{StaticResource brdRate}">
<Label Content="1" Style="{StaticResource lblRateBold}"></Label>
</Border>
<Border Grid.Row="1" Grid.Column="0" Style="{StaticResource brdRate}">
<Label Content="123" Style="{StaticResource lblRateBold}"></Label>
</Border>
<Border Grid.Row="1" Grid.Column="1" Style="{StaticResource brdRate}">
<Label Content="123" Style="{StaticResource lblRateBold}"></Label>
</Border>
<Border Grid.Row="1" Grid.Column="2" Style="{StaticResource brdRate}">
<Label Content="123" Style="{StaticResource lblRateBold}"></Label>
</Border>
<Border Grid.Row="1" Grid.Column="3" Style="{StaticResource brdRate}">
<Label Content="123" Style="{StaticResource lblRateBold}"></Label>
</Border>
</Grid>
<Grid Style="{StaticResource grdRate}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0" Grid.Column="0" Style="{StaticResource brdRate}">
<Label Content="name" Style="{StaticResource lblRateBold}"></Label>
</Border>
<Border Grid.Row="0" Grid.Column="1" Style="{StaticResource brdRate}">
<Label Content="Details" Style="{StaticResource lblRateBold}"></Label>
</Border>
<Border Grid.Row="0" Grid.Column="2" Style="{StaticResource brdRate}">
<Label Content="name" Style="{StaticResource lblRateBold}"></Label>
</Border>
<Border Grid.Row="1" Grid.Column="0" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="1" Grid.Column="1" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="1" Grid.Column="2" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="2" Grid.Column="0" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="2" Grid.Column="1" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="2" Grid.Column="2" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="3" Grid.Column="0" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="3" Grid.Column="1" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="3" Grid.Column="2" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="4" Grid.Column="0" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="4" Grid.Column="1" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="4" Grid.Column="2" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
</Grid>
</WrapPanel>
My styles:
<Style TargetType="Border" x:Key="brdRate">
<Setter Property="BorderBrush" Value="White"></Setter>
<Setter Property="BorderThickness" Value="0.5"></Setter>
</Style>
<Style TargetType="Label" x:Key="lblRateBold">
<Setter Property="FontSize" Value="14"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
</Style>
<Style TargetType="Label" x:Key="lblRate">
<Setter Property="FontSize" Value="14"></Setter>
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
<Setter Property="Cursor" Value="Hand"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#40FF00"></Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="Grid" x:Key="grdRate">
<Setter Property="Background" Value="#BDBDBD"></Setter>
<Setter Property="Margin" Value="5"></Setter>
</Style>
How can I make different children to have different height?
What about setting the Height property of the Grid elements that you add to the WrapPanel to some different values?
<WrapPanel x:Name="wp">
<Grid Background="Silver" Height="300" Width="50" />
<Grid Background="Silver" Height="20" Width="50" />
<Grid Background="Silver" Height="150" Width="50" />
</WrapPanel>
Grid grid = new Grid() { Background = Brushes.Silver, Width = 50, Height = 100 };
wp.Children.Add(grid);
Edit:
You probably also want to set the VerticalAlignment property of the Grid to Top in order for it to not stretch vertically:
<Grid Style="{StaticResource grdRate}" VerticalAlignment="Top">
...
I have DataTemplate for my ListView control, which contains few textblocks and a button. I want the button to be visible only when the item is selected.
Here's my DataTemplate code:
<ListView.ItemTemplate>
<DataTemplate>
<Grid Background="AliceBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="90" />
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Left" Margin="10,0,10,0"
VerticalAlignment="Center" FontFamily="Verdana" FontSize="16"
FontWeight="Black" Grid.Column="0" Text="{Binding name}"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Grid.Column="1">
<TextBlock FontFamily="Verdana" FontSize="10" Grid.Column="1"
VerticalAlignment="Center" HorizontalAlignment="Center"
Text="Number of Chapters: " />
<TextBlock FontFamily="Verdana" FontSize="12" Grid.Column="1"
VerticalAlignment="Center" HorizontalAlignment="Center"
Text="{Binding chaptersCount}" />
</StackPanel>
<Button HorizontalAlignment="Center" Height="50" Width="80" Content="Read"
Grid.Column="2" Visibility="Hidden" Click="Button_Click_3" Name="ReadButton"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
How can I do that?
You can achieve this with DataTrigger in DataTemplate which will check for IsSelected property of Templated parent:
<ListView.ItemTemplate>
<DataTemplate>
.....
<Button HorizontalAlignment="Center" Height="50"
Width="80" Content="Read"
Grid.Column="2" Visibility="Hidden" Name="ReadButton"/>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected,
RelativeSource={RelativeSource Mode=TemplatedParent}}"
Value="True">
<Setter TargetName="ReadButton" Property="Visibility"
Value="Visible"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListView.ItemTemplate>
You need to slightly change your Button: A quick XAML way would be to add a Trigger on its Visibility to make it hidden when not selected (note: code written here, hopefully there's no typo):
<Button HorizontalAlignment="Center" Height="50" Width="80" Content="Read"
Grid.Column="2" Click="Button_Click_3" Name="ReadButton">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListViewItem}}" Value="False">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
I have two things I'm trying to achieve:
Add a horizontal separator between listbox items in WPF.
Don't show the separator at the bottom of the final listbox item.
My current layout is pictured here:
This shows 2 listbox items (though I have no way of knowing how many items could potentially be generated). I would like them separated by a horizontal separator, except on the last listbox item so there isn't a spare separator at the bottom of the pane. How can I achieve this in XAML? See my current XAML here:
<TabItem Header="Third Party Updates">
<Grid>
<TextBlock Name="ThirdPartyNoManifestTextBox" Width="Auto" HorizontalAlignment="Left" Margin="267,22,0,0" TextWrapping="Wrap" Text="{Binding Path=WindowsUpdateCompliance, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top" FontSize="14" Foreground="DarkSlateBlue"/>
<Button Name="CheckforThirdPartyUpdatesButton" Content="Check for Third Party Updates" Margin="10,11,339,304" Click="CheckforThirdPartyUpdatesButton_Click" MaxWidth="200" Grid.Column="1" Grid.Row="1"/>
<ListBox Name="ThirdPartyListBox" ItemsSource="{Binding}" Margin="0,70,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button Name="ThirdPartyInstallButton" Content="Install" Click="InstallThirdPartyUpdatesButton_Click" Margin="5,5,0,0" Height="25"></Button>
<Button Name="ThirdPartyPostoneButton" Content="Postpone" Click ="PostponeThirdPartyUpdatesButton_Click" Margin="5,5,0,0" Height="25"></Button>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Content="•" Grid.Row="1" VerticalContentAlignment="Center"/>
<Label Content="•" Grid.Row="2" VerticalContentAlignment="Center"/>
<Label Content="•" Grid.Row="3" VerticalContentAlignment="Center"/>
<Label Content="•" Grid.Row="4" VerticalContentAlignment="Center"/>
<StackPanel Orientation="Horizontal" Grid.Column="1">
<Label Name="MissingRequiredAppGenericTextBlock" VerticalAlignment="Center" Content="Required application update detected:" FontWeight="SemiBold" FontSize="12"/>
<Label Name="RequiredAppNameTextBlock" VerticalAlignment="Center" Content="{Binding Item2.Name}" Foreground="MidnightBlue" FontSize="13"/>
<Label Grid.Column="1" Grid.Row="1" Name="RequiredAppVersionTextBlock" Content="{Binding Item2.RequiredVersion}" VerticalAlignment="Center" Foreground="MidnightBlue" FontSize="13"/>
</StackPanel>
<TextBlock Grid.Column="1" Grid.Row="1" Name="RequiredAppCustomUIMessageTextBlock" Text="{Binding Item2.CustomUIMessage}" TextWrapping="Wrap" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="2" VerticalAlignment="Center">
<Hyperlink Name="Link" NavigateUri="{Binding Item2.TT}" RequestNavigate="Hyperlink_RequestNavigate">
<TextBlock Text="{Binding Item2.TT}"/>
</Hyperlink>
</TextBlock>
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="3">
<TextBlock Text="The following processes will be closed prior to install: " VerticalAlignment="Center" />
<TextBlock Text="{Binding Item2.ListOfProcessesToClose}" FontWeight="SemiBold" Foreground="Red" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="4">
<TextBlock Text="You have used " VerticalAlignment="Center" />
<TextBlock Text="{Binding Item3.UsedDeferrals}" VerticalAlignment="Center"/>
<TextBlock Text=" of " VerticalAlignment="Center"/>
<TextBlock Text="{Binding Item2.MaxDefferals}" VerticalAlignment="Center"/>
<TextBlock Text=" deferrals for this update." VerticalAlignment="Center"/>
</StackPanel>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<DataTrigger Binding="{Binding PostponeClicked}" Value="1">
<Setter Property="Visibility" Value="Hidden"></Setter>
</DataTrigger>
<Trigger Property="Control.IsMouseOver" Value="True">
<Setter Property="Control.BorderBrush" Value="SteelBlue" />
<Setter Property="Control.BorderThickness" Value="1" />
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Grid>
</TabItem>
Update
Added suggested separator code. Separator is now present but does not fill the available horizontal space:
You can try to put Separator at the top of each item. With that you don't have unwanted Separator after the last item.
Then use DataTrigger with {RelativeSource PreviousData} binding to hide separator at the top of the first item :
<StackPanel>
<Separator>
<Separator.Style>
<Style TargetType="Separator">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Separator.Style>
</Separator>
<StackPanel Orientation="Horizontal">
<Button Name="ThirdPartyInstallButton" Content="Install" Click="InstallThirdPartyUpdatesButton_Click" Margin="5,5,0,0" Height="25"></Button>
<Button Name="ThirdPartyPostoneButton" Content="Postpone" Click ="PostponeThirdPartyUpdatesButton_Click" Margin="5,5,0,0" Height="25"></Button>
<Grid>
.........
.........
</Grid>
</StackPanel>
</StackPanel>
UPDATE :
I can't tell for sure what causes the separator not stretching accross listbox width. Maybe try to set listboxitem's HorizontalContentAlignment to Stretch :
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>