WPF TextBox text selection issue - wpf

I have an issue with selecting part of the text in TextBox. I cannot understand why, I can select just one character at a time and I can select as many as I want with the keyboard (shift+arrow). This is my code:
<Style TargetType="{x:Type local:EditableTextBlock}">
<Setter Property="FocusVisualStyle"
Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:EditableTextBlock}">
<Grid Background="{TemplateBinding Background}">
<Grid.Resources>
<BooleanToVisibilityConverter x:Key="bool2Vis" />
<local:BooleanToInverseVisibilityConverter x:Key="bool2InverseVis" />
</Grid.Resources>
<TextBox x:Name="textbox"
Visibility="{Binding IsInEditMode, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource bool2Vis}}"
TextWrapping="{TemplateBinding TextWrapping}"
Text="{Binding Text, Mode=TwoWay, UpdateSourceTrigger=LostFocus, RelativeSource={RelativeSource Mode=TemplatedParent}}" IsHitTestVisible="True" Focusable="True"/>
<ContentControl x:Name="textblockContainer"
Visibility="{Binding IsInEditMode, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource bool2InverseVis}}">
<TextBlock x:Name="textblock"
Text="{TemplateBinding Text}"
TextWrapping="{TemplateBinding TextWrapping}"
TextTrimming="CharacterEllipsis"/>
</ContentControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Any help will be appreciated.
Thanks in advance.

Related

Custom TextBox not updating property when change

I have a custom TextBox control where the defaul value is the Tag string. When the TextBox is empty it shows a TextBlock on top with the Tag string with other color and centered. The control works on almost every scenario but I am having issues with one specifically. I have a TexBox that need to update a property when I type so I thought that adding the UpdateSourceTrigger=PropertyChanged will update the peroperty, but it doesn't work when I use the custom style, it works only on default so I thought that the issue is on the custom Style, but I am too new on xaml to figure out. Could someone please enlight me on what I am doing wrong?
<TextBox Grid.Column="2" Margin="5" Style="{StaticResource DefaultTextBox}" Tag="Sesión" Text="{Binding Sesion, UpdateSourceTrigger=PropertyChanged}" Width="100"/>
<!--Directorio TextBox-->
<Style x:Key="DefaultTextBox" TargetType="TextBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Border Background="#ffffff" BorderBrush="#ffacacac" BorderThickness="1" CornerRadius="0">
<Grid>
<TextBox x:Name="TextBoxPersonalizado" Background="Transparent" BorderThickness="0" VerticalContentAlignment="Center" Text="{TemplateBinding Text}"/>
<TextBlock Foreground="#828282" HorizontalAlignment="Center" IsHitTestVisible="False" Text="{TemplateBinding Tag}" VerticalAlignment="Center">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding Text, ElementName=TextBoxPersonalizado}" Value="">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
<Setter Property="Visibility" Value="Hidden"/>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
TemplateBinding is for one direction only.
That beeing said, you need to use RelativeSource inside your template.
Text="{Binding Text, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWayToSource, UpdateSourceTrigger=PropertyChanged}"
Then you can use your customized TextBox like this.
<TextBox
x:Name="InputTextBox"
Grid.Column="0"
Width="100"
Margin="5"
Style="{StaticResource DefaultTextBox}"
Tag="Sesión" />
<TextBox Grid.Column="1" Text="{Binding ElementName=InputTextBox, Path=Text}" />

How to create a WPF ListBoxItem with check mark?

I was looking a while for how to build a list item with a check mark if selected.
Checking different Resources, it seems there are a lot of code solutions, bot no true XAML only one.
So this is what i tried to achive:
Any additions are welcomed.
In the spirit of Answer-your-own (Stackoverflow blog)
So here is what I actually got after hours of figuring it out.
As said, any additions are welcomed.
The check mark is:
U+2714 (10004) ✔ HEAVY CHECK MARK Dingbats (2700–27BF)
The style code:
basically creating a wrapper for any item, setting base properties, and changing them on item selection, made available as StaticResource as checkmarkItem
<Window.Resources>
<Style x:Key="checkmarkItem" TargetType="ListBoxItem">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border" Background="Transparent" BorderThickness="5" BorderBrush="Transparent" Margin="0,1,0,1">
<Grid>
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Right" Name="Marker" Visibility="Hidden" Background="#0078D7" Padding="5,0,0,5" Foreground="White">✔</TextBlock>
<ContentPresenter />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ListBoxItem.IsSelected" Value="true">
<Setter TargetName="Marker" Property="Visibility" Value="Visible" />
<Setter TargetName="Border" Property="BorderBrush" Value="#0078D7"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
The implementation:
it is just a regular stackpanel arrangement, all styles are added by referring in ItemContainerStyle="{StaticResource checkmarkItem}"
<Grid>
<Label Grid.Row="0" FontSize="26">Software</Label>
<ListView Grid.Row="1" SelectionMode="Multiple" BorderBrush="Transparent" ItemContainerStyle="{StaticResource checkmarkItem}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="64" AutomationProperties.Name="{Binding Title}">
<Image Source="{Binding Icon}" Height="48" Width="48" VerticalAlignment="Center" Margin="5,0,20,0"/>
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<TextBlock Text="{Binding Title}" FontSize="16" TextWrapping="Wrap"/>
<TextBlock Text="{Binding Description}" TextWrapping="Wrap" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>

Round close button in corner of image

I am creating gallery, it contains images. So I want to remove the images from gallery using close buttons. The position of the close button should be the corner of the every images. How can I create like this corner buttons styles? Any idea?
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel Width="120">
<Button Height="25" VerticalAlignment="Top" Content="Show" Width="100" Margin="5" />
<Image Height="90" Source="{Binding Path=Thumbnail}" MouseLeftButtonDown="Image_MouseLeftButtonDown"/>
<TextBlock TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" Text="{Binding Path=Name}" >
<TextBlock.ToolTip>
<ToolTip Visibility="{Binding RelativeSource={RelativeSource Self}, Path=PlacementTarget, Converter={StaticResource trimmedVisibilityConverter}}">
<ToolTip.Content>
<TextBlock Text="{Binding Name}"/>
</ToolTip.Content>
</ToolTip>
</TextBlock.ToolTip>
</TextBlock>
</StackPanel>
<!--<Separator Width="5" Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Background="Transparent"/>-->
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
place Image and Button in the same Grid. Align button to top right corner, and add margin to top and right sides of image, so the button goes outside image borders
<Grid>
<Image Margin="0,8,8,0"/>
<Button HorizontalAlignment="Right" VerticalAlignment="Top"
Width="16" Height="16" Content="x"/>
</Grid>
Here's a round button from one of my samples which looks pretty similar to what you're after.
The colours and mouseover may be different.
<SolidColorBrush x:Key="DarkLight" Color="Chocolate"/>
<SolidColorBrush x:Key="BrightMid" Color="PapayaWhip"/>
<Geometry x:Key="CloseIcon">
M19.85228,12.08996L12.093,19.849201 24.242323,31.997846 12.094,44.145998 19.852051,51.904958 32.001186,39.756277 44.150543,51.904958 51.909,44.145994 39.760246,31.997501 51.909,19.849201 44.15049,12.08996 32.001431,24.238849z M32,0C49.671021,3.1599484E-07 64,14.329407 64,31.998501 64,49.677606 49.671021,63.997003 32,63.997003 14.328003,63.997003 0,49.677606 0,31.998501 0,14.329407 14.328003,3.1599484E-07 32,0z
</Geometry>
<Style x:Key="CloseButton" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="{StaticResource BrightMid}"/>
<Setter Property="Background" Value="{StaticResource DarkLight}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="Background" Value="White"/>
</Trigger>
</ControlTemplate.Triggers>
<Border CornerRadius="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}"
Width="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}"
Name="border"
BorderThickness="1"
BorderBrush="Black"
Background="{Binding Background, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}"
>
<Path Data="{StaticResource CloseIcon}" Stretch="Fill"
Fill="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}"
/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Changing font size of a button

In my .xaml file these are my resources:
<DataTemplate DataType="{x:Type vm:KeyModel}">
<TextBlock DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" FontFamily="Verdana" FontSize="26" Margin="0" >
<Run Text="{Binding Content.Text, Mode=OneWay}" />
</TextBlock>
</DataTemplate>
And here's the style:
<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="8" BorderBrush="#006AB6" BorderThickness="1" Name="border" Background="{TemplateBinding Background}">
<Grid x:Name="grid" >
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
</Grid>
</Border>
<ControlTemplate.Triggers>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="18"/>
</Style>
And in code I have:
<Button Name="btn_Q" FontSize="8" Content="{Binding KB.Key_Q}" Grid.Column="1" Style="{DynamicResource RoundCorner}"/>
<Button Name="btn_A" Content="{Binding KB.Key_A}" Grid.Column="1" Style="{DynamicResource RoundCorner}"/>
But the FontSize for btn_Q doesn't get to be 8. How can I fix it? I need to make only btn_Q to have a fontsize of 8. All of my other buttons, like btn_A are fine with the style's fontsize.

WPF ComboBox Residing in a ListBox Click Event

I have a little issue.
I have a a ListBox that is bound to a list of object. These Objects have a property that can be set. I have in the LIstBox ItemTemplate (a datatemplate) a combobox that is about to the objects property and the combobox has some hardcoded values.
My problem is that when the list box is displayed and I click ont he combo, only the ListBoxItem is selected, The click never makes it to the combobox!
just to give you an idea.
<ListBox SelectionMode="Multiple" VerticalAlignment="Center" HorizontalAlignment="Left" Style="{StaticResource Style_ListBox}" ItemsSource="{Binding ModeSampleSets, Mode=OneWay}">
<ListBox.ItemTemplate>
<DataTemplate DataType="ListBoxItem">
<Grid>
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" FontWeight="Bold" Text="{Binding Name, Mode=OneWay}" Width="{Binding ElementName=this, Path=Content.DesiredWidth}"/>
<ComboBox Focusable="False" Width="10" Height="10" Grid.Column="2" Style="{StaticResource Style_ComboBoxColorPicker}" SelectedItem="{Binding GraphColor, Mode=TwoWay}" >
<ComboBoxItem IsSelected="True" Content="#e62a2c" />
<ComboBoxItem Content="#ec7c28"></ComboBoxItem>
<ComboBoxItem Content="#69c5d8"></ComboBoxItem>
<ComboBoxItem Content="#36b34b"></ComboBoxItem>
<ComboBoxItem Content="#415dae"></ComboBoxItem>
<ComboBoxItem Content="#9056A3"></ComboBoxItem>
<ComboBoxItem Content="#0b0b0b"></ComboBoxItem>
<ComboBoxItem Content="#666666"></ComboBoxItem>
<ComboBoxItem Content="#a6a6a6"></ComboBoxItem>
</ComboBox>
</Grid>
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="8" Text="{Binding SampleAnalysisDate, Mode=OneWay}" Width="{Binding ElementName=this, Path=Content.DesiredWidth}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,4,0,0">
<TextBlock FontSize="14" Text="{Binding WaveLengthStart, Mode=OneWay}" Width="{Binding ElementName=this, Path=Content.DesiredWidth}"/>
<TextBlock Margin="2,0,0,0" FontSize="14" Text="{x:Static UIStrings:WaveLengthScanStrings.WaveLengthScanModeView_SampleWaveLength_Seperator}" Width="{Binding ElementName=this, Path=Content.DesiredWidth}"/>
<TextBlock Margin="2,0,0,0" FontSize="14" Text="{Binding WaveLengthStop, Mode=OneWay}" Width="{Binding ElementName=this, Path=Content.DesiredWidth}"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Styles:
<Style x:Key="Style_ComboBoxColorPickerItemContainerStyle" TargetType="ComboBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Border Name="ItemBorder" Margin="2" BorderBrush="Transparent" BorderThickness="1.5" Background="Transparent">
<ContentPresenter Margin="2" Height="20" Width="20" ContentTemplate="{StaticResource DataTemplate_ComboBoxColorPickerItemTemplate}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="ItemBorder" Property="BorderBrush" Value="Black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="Style_ComboBoxColorPicker" TargetType="ComboBox">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel MaxWidth="100"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate" Value="{StaticResource DataTemplate_ComboBoxColorPickerItemTemplate}"/>
<Setter Property="ItemContainerStyle" Value="{StaticResource Style_ComboBoxColorPickerItemContainerStyle}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton
ClickMode="Press"
Name="ComboToggleButton"
IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
Focusable="False"
>
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<ContentPresenter/>
</ControlTemplate>
</ToggleButton.Template>
<ContentPresenter Content="{TemplateBinding ComboBox.SelectionBoxItem}" ContentTemplate="{TemplateBinding ComboBox.ItemTemplate}" ContentTemplateSelector="{TemplateBinding ComboBox.ItemTemplateSelector}"/>
</ToggleButton>
<Popup
Placement="Bottom"
Name="Popup"
Focusable="False"
AllowsTransparency="True"
IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"
PopupAnimation="Fade">
<Grid
MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}"
Name="DropDown"
SnapsToDevicePixels="True">
<Border
BorderBrush="Gray"
BorderThickness="1.5"
Name="DropDownBorder"
Background="White">
<ScrollViewer
Margin="0"
SnapsToDevicePixels="True">
<ItemsPresenter />
</ScrollViewer>
</Border>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="Style_ListBox" TargetType="ListBox">
<Setter Property="BorderBrush" Value="{StaticResource Brush_PanelInnerBorder}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Background="{StaticResource Brush_PanelInnerBackground}"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid Background="{StaticResource Brush_PanelInnerBackground}" Margin="-.5">
<Border x:Name="BorderItem" Margin="0" ClipToBounds="True" BorderThickness="0" Style="{StaticResource Style_PanelInnerBorder}">
<Rectangle x:Name="BackgroundRec" Fill="Transparent" Stroke="Transparent" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Border>
<ContentPresenter Name="TheContentPresenter" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Border Margin="0" ClipToBounds="True" Style="{StaticResource Style_PanelInnerBorder}">
<Rectangle VerticalAlignment="Bottom" Width="{TemplateBinding Width}" Height="0"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="BorderItem" Property="Background" Value="{StaticResource Brush_Highlight}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
Make sure you don't have IsHitTestVisible="False" on the ComboBox's style. Can you please post here the styles you're using?
I found the problem.
My ItemContainerStyle Template had a rectangle and i guess it was implying zindex somehow. When I expclicity told it to draw the content before the border and it's rectangle, it worked. i just had to add Panel.ZIndex="1" and it worked.

Resources