In WPF I would like the label in the CheckBox to behave like a button, so when I toggle the checkbox to ON, I would like the label to change to a button, and when I toggle the checkbox to OFF, then button go change back to label.
Here is what I have so far
<CheckBox Margin="2,0,2,0"
IsChecked="{Binding IsSteps}"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
Height="32"
FocusVisualStyle="{x:Null}"
Style="{StaticResource SliderCheckBoxStyle}">
<CheckBox.Content>
<TextBlock Text="Steps" Foreground="#FFFFFFFF" FontFamily="Lucida Sans" FontSize="8" FontWeight="Bold"/>
</CheckBox.Content>
</CheckBox>
In your Checkbox.Content, create a StackPanel with both TextBlock and Button.
Then, You can bind your TextBlock.Visibilty and Button.Visibilty to "IsSteps" with triggers and setters.
<CheckBox Margin="2,0,2,0"
IsChecked="{Binding IsSteps}"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
Height="32"
FocusVisualStyle="{x:Null}"
Style="{StaticResource SliderCheckBoxStyle}">
<CheckBox.Content>
<StackPanel>
<TextBlock Text="Steps" Foreground="#FFFFFFFF" FontFamily="Lucida Sans" FontSize="8" FontWeight="Bold">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSteps}" Value="True">
<Setter Property="Visibility" Value="Collapsed">
</DataTrigger>
</Style.Triggers>
</Style>
<TextBlock.Style>
</TextBlock>
<Button>
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSteps}" Value="False">
<Setter Property="Visibility" Value="Collapsed">
</DataTrigger>
</Style.Triggers>
</Style>
<Button.Style>
</Button>
</StackPanel>
</CheckBox.Content>
</CheckBox>
Now their Visibility property depends on IsSteps from your DataContext object, so when one appears and other one disappears.
Related
I have the following XAML to bind data to a ListBox filled with CheckBoxes:
<ListBox Background="Transparent" Grid.Column="8" Grid.Row="3" ItemsSource="{Binding Path=StakeTypes}" Foreground="White"
Name="lbStakes" ItemContainerStyle="{StaticResource SelectionListBoxItem}" SelectionChanged="lbStakes_SelectionChanged" SelectionMode="Extended">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem IsSelected="{Binding IsSelected, Mode=TwoWay}" HorizontalContentAlignment="Stretch">
<CheckBox Cursor="Hand" IsChecked="{Binding IsSelected, Mode=TwoWay}" Content="{Binding Text}" HorizontalContentAlignment="Stretch" />
</ListBoxItem>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Problem is, the style for the ListBox selection is different than if I manually created each ListBox Item:
<ListBox Background="Transparent" Cursor="Hand" Grid.Column="6" Grid.Row="3" Name="lbStakes" SelectionMode="Extended">
<ListBoxItem IsSelected="True">
<CheckBox IsChecked="True" Foreground="White" Content="Low" />
</ListBoxItem>
<ListBoxItem IsSelected="True">
<CheckBox IsChecked="True" Foreground="White" Content="Medium" />
</ListBoxItem>
<ListBoxItem IsSelected="True">
<CheckBox IsChecked="True" Foreground="White" Content="High" />
</ListBoxItem>
<ListBoxItem IsSelected="True">
<CheckBox IsChecked="True" Foreground="White" Content="Highest" />
</ListBoxItem>
</ListBox>
Here are the images:
I would like it to look like the second image. Any ideas are greatly appreciated.
Update: The following is the style I am trying to apply to the ListBoxItem:
<Style x:Key="SelectionListBoxItem" TargetType="ListBoxItem">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border" Padding="3" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource myBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The two styles are different because in your bound ListBox you are using ItemContainerStyle="{StaticResource SelectionListBoxItem}", whereas in your second snippit, the default listbox item style applies. Try removing this style assignment from the bound listbox.
<Window.Resources>
<Style x:Key="SelectionListBoxItem" TargetType="ListBoxItem">
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border" BorderBrush="Black" BorderThickness="0.5" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ListBox Background="Transparent" Grid.Column="8" Grid.Row="3" ItemsSource="{Binding Path=IsSelectede}" Foreground="White"
Name="lbStakes" ItemContainerStyle="{StaticResource SelectionListBoxItem}">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem IsSelected="{Binding IsSelected, Mode=TwoWay}" HorizontalContentAlignment="Stretch" KeyboardNavigation.TabNavigation="None">
<CheckBox Cursor="Hand" IsChecked="{Binding IsSelected, Mode=TwoWay}" Content="{Binding Text}" HorizontalContentAlignment="Stretch" />
</ListBoxItem>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
some of the binding properties are changed please correct them according to your properties .And also the style of your brush.I hope this will help.
I have the following xaml for displaying files. If the file exists on the local machine, it's a clickable hyperlink, otherwise just a normal textblock.
<TextBlock Visibility="{Binding FileName, Converter={StaticResource fileExistsConverter}}" Grid.Column="2" TextDecorations="Underline" Margin="5,0,0,0" Foreground="Black" Text="{Binding FileName}" />
<TextBlock Margin="5,0,0,0" Grid.Column="2" Visibility="{Binding FileName, Converter={StaticResource fileDoesntExistConverter}}">
<Hyperlink Click="Hyperlink_Click_1">
<TextBlock Text="{Binding FileName}" />
</Hyperlink>
</TextBlock>
This works on page load, but doesn't update when the window is open when for example one of the listed files is downloaded. How would I go about triggering a refresh so the XAML can swap the styles?
resources :
<Style x:Key="SwapTemplateStyle" TargetType="ContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<TextBlock />
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsExist}" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Hyperlink>
<TextBlock />
</Hyperlink>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
in your view :
<ContentControl Style="{StaticResource SwapTemplateStyle}" />
I have a ListView with Horizontal WrapPanel as its ItemsPanelTemplate.
I want to get rid of the blue background for selected item. It is visible only on the left of the selected item.
There are many similar question on SO and I tried a lot of the solutions and none of them worked.
This is what I have already tried:
<ListView.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Style.Resources>
<!-- Foreground for Selected ListViewItem -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}"
Color="Black"/>
<!-- Background for Selected ListViewItem -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent"/>
<!--SelectedItem without focus-->
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
</Style.Resources>
</Style>
</ListView.Resources>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<EventSetter Event="Control.MouseDoubleClick" Handler="HandleSelectedItemDoubleClick"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="2" ScaleY="2" CenterX="12" CenterY="12" />
</Setter.Value>
</Setter>
<Setter Property="Panel.ZIndex" Value="150"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Background" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" Width="210" Margin="15" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
You need to overwrite the SystemColors.HighlightBrushKey for the ListView to be Transparent (or whatever color you want)
I typically put this in the ListView.Resources so it only applies to the specific ListView, and not all ListViews in my application
<ListView.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent"/>
</ListView.Resources>
Its very close to what you have in your code already, but you need to set it for the ListView.Resources, not ListViewItem.Resources
To remove all default styling (hovering, selecting, etc.) just define a custom Template for the ItemContainer (not the Item itself):
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
Found on MSDN Forum
This is what did it for me:
<UserControl.Resources>
<DataTemplate x:Key="ItemTemplate">
<StackPanel Orientation="Vertical" Background="Transparent" Opacity="1" Width="185" MaxWidth="185">
<StackPanel Orientation="Horizontal">
<TextBlock
Margin="0,0,10,0"
Background="Transparent"
Foreground="DarkGoldenrod"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=EventTypeName, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=AccountIdentity, Mode=OneWay}" />
</StackPanel>
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod" MaxWidth="170"
FontSize="12" FontStyle="Italic" TextTrimming="WordEllipsis" ToolTip="{Binding Path=EventMessage,Mode=OneWay}"
Text="{Binding Path=EventMessage, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=EventLoggedOn, Mode=OneWay}"
TextTrimming="WordEllipsis"
ToolTip="{Binding Path=EventLoggedOn, Mode=OneWay}"
Margin="0,0,10,0" />
<StackPanel Orientation="Horizontal">
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=QualifiedCreator, Mode=OneWay}" />
</StackPanel>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="SelectedTemplate">
<StackPanel Orientation="Vertical" Background="LightGray" Opacity="1" Width="185" MaxWidth="185">
<StackPanel Orientation="Horizontal">
<TextBlock
Margin="0,0,10,0"
Background="Transparent"
Foreground="Yellow"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=EventTypeName, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Yellow"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=AccountIdentity, Mode=OneWay}" />
</StackPanel>
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod" MaxWidth="170"
FontSize="12" FontStyle="Italic" TextTrimming="WordEllipsis" ToolTip="{Binding Path=EventMessage,Mode=OneWay}"
Text="{Binding Path=EventMessage, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=EventLoggedOn, Mode=OneWay}"
TextTrimming="WordEllipsis"
ToolTip="{Binding Path=EventLoggedOn, Mode=OneWay}"
Margin="0,0,10,0" />
<StackPanel Orientation="Horizontal">
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=QualifiedCreator, Mode=OneWay}" />
</StackPanel>
</StackPanel>
</DataTemplate>
<Style TargetType="ListViewItem" x:Key="ContainerStyle">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ContentTemplate" Value="{StaticResource ResourceKey=ItemTemplate}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True" >
<Setter Property="ContentTemplate" Value="{StaticResource ResourceKey=SelectedTemplate}" />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
The simplest way to do this is to set the background to {x:Null} when the item is selected, using a trigger.
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="Background"
Value="{x:Null}" />
<Setter Property="BorderBrush"
Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
...
</ListView>
I have a textbox in which when it has focus a popup appears below it. But when the popup is open and I scroll, it appears to stay in the same spot where it was opened. I need help in figuring out how to have the popup appear below the textbox when I scroll. How would I do this in xaml?
Thanks!
MainWindow View:
<Grid x:Name="LayoutRoot">
<ScrollViewer>
<local:ControlView/>
</ScrollViewer>
</Grid>
Resource Dictionary:
<Style TargetType="{x:Type Popup}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=txtTest, Path=IsKeyboardFocused}" Value="True">
<Setter Property="IsOpen" Value="True" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=txtTest, Path=IsKeyboardFocused }" Value="False">
<Setter Property="IsOpen" Value="False" />
</DataTrigger>
</Style.Triggers>
</Style>
<Style x:Key="BorderStyle" TargetType="{x:Type Border}">
<Setter Property="Background" Value="LemonChiffon"/>
<Setter Property="Padding" Value="5"/>
</Style>
UserControl View:
<Grid x:Name="LayoutRoot">
<StackPanel Grid.Row="1" Grid.Column="4" Orientation="Vertical">
<Button Content="Button" Width="100" Height="100"/>
<Button Content="Button" Width="100" Height="100"/>
<TextBox x:Name="txtTest" HorizontalAlignment="Stretch"/>
<Popup Name="TestPopup" StaysOpen="True"
PlacementTarget="{Binding ElementName=txtTest}"
AllowsTransparency="True" Placement="{Binding ElementName=txtTest}">
<Border Style="{DynamicResource BorderStyle}">
<GroupBox Header="Test Popup">
<ScrollViewer Margin="0,2,0,0" VerticalScrollBarVisibility="Hidden">
<!--BINDING-->
<Label Content="Hello World!"/>
</ScrollViewer>
</GroupBox>
</Border>
</Popup>
<ContentPresenter Content="{Binding testBinding}"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
</ContentPresenter>
</StackPanel>
</Grid>
Try this:
<Style TargetType="{x:Type Popup}">
<Setter
Property="IsOpen"
Value="{Binding IsKeyboardFocusedWithin, ElementName=txtTest, Mode=OneWay}"/>
</Style>
I'm trying to create a layout similar to this:
alt text http://img20.imageshack.us/img20/3533/stackn.png
Here's the code I have:
<StackPanel TextBlock.FontFamily="Segoe UI" Orientation="Horizontal">
<StackPanel HorizontalAlignment="Stretch" Width="Auto">
<TextBlock Padding="5,0,5,0" FontSize="12" FontWeight="Bold" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}" />
<TextBlock Padding="5,0,5,0" FontSize="12" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Id}" />
</StackPanel>
<StackPanel>
<TextBlock Padding="5,0,5,0" FontSize="10" Text="Delete">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Padding="5,0,5,0" FontSize="10" Text="Move">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</StackPanel>
Why don't you use a Grid for this?
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="{Binding Title}" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Text="Move" />
</StackPanel>
</Grid>
I think you might be better off with a grid as your parent element. Omitting your styles and what not, here's the XAML for the layout in your drawing.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="50" /> <!-- or some other fixed width -->
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<!-- left hand stackpanel content -->
</StackPanel>
<StackPanel Grid.Column="1">
<!-- right hand StackPanel content -->
</StackPanel>
</Grid>
You don't really want a StackPanel for your red container. I'd go with a DockPanel, dock the rightmost blue panel to the right, and ensure LastChildFill is on to ensure the leftmost blue panel expands to the window width.
Here is the code for what I get from your post:
<DockPanel TextBlock.FontFamily="Segoe UI" LastChildFill="True">
<StackPanel DockPanel.Dock="Right">
<TextBlock Padding="5,0,5,0" FontSize="10" Text="Delete">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Padding="5,0,5,0" FontSize="10" Text="Move">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
<StackPanel HorizontalAlignment="Stretch" Width="Auto">
<TextBlock Padding="5,0,5,0" FontSize="12" FontWeight="Bold" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}" />
<TextBlock Padding="5,0,5,0" FontSize="12" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Id}" />
</StackPanel>
</DockPanel>
Hope this helps!!