I've noticed that TextBoxes are very slow and create performance issues when the Text is changed dynamically by code (I need to change the Text continuosly to 10-15 TextBoxes at the same time), so, as a workaround, I've created a custom control with a TextBlock and a TextBox:
The TextBlock is used in almost all time.
The TextBox is used only when I need to edit the Text inside the control with keyboard.
My solution is to change the template and use the TextBox when the control is focused:
(Value is a string Dependency Property)
<Style TargetType="{x:Type local:CustomControl1}">
<Setter Property="Value" Value="Val"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CustomControl1}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{TemplateBinding Value}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CustomControl1}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBox HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
Text="{Binding Path=Value, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
But when I click on the control nothing happens.
I think that the problem is that the "focus state" is passed to the internal TextBox, and the control loses the "focus state".
There is a better way to create a custom "TextBox" control like this, or a way to resolve this problem?
You don't need a custom control for this, that's just adding unnecessary overhead. What you're trying to create is still a TextBox, with all the usual behavior of a TextBox (focus etc). All you need to do is change the template to a TextBlock when it's not in focus:
<Window.Resources>
<Style TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="False">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<TextBlock Text="{TemplateBinding Text}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<TextBox Text="Hello World" />
<TextBox Text="Goodbye World" />
</StackPanel>
Related
So I'm making a custom window template for my WPF application. The trouble I'm having is that I cannot access the Window Title property inside the template.
I tried this:
<TextBlock Text="{TemplateBinding Title}" />
And this:
<TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}" />
Everything that I've read indicates that either of those two should work and yet the text is never set.
Any suggestions?
EDIT: Presenting the entire style xaml
<Style x:Key="RegularWindow" TargetType="{x:Type Window}">
<Setter Property="Foreground" Value="{StaticResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="AllowsTransparency" Value="True"/>
<Setter Property="WindowStyle" Value="None"/>
<Setter Property="SizeToContent" Value="WidthAndHeight"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Border BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="10" Background="{TemplateBinding Background}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="{TemplateBinding Title}" FontWeight="Bold" Grid.Row="0" />
<AdornerDecorator Grid.Row="1">
<ContentPresenter/>
</AdornerDecorator>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So it turns out that Expression Blend fails to render the window correctly. As soon as I run the code it actually works. My bad for trusting Expression Blend.
I want to put a slider in a datagrid cell and the row has a height of 20, so i'd like to make the height of the thumb of the slider smaller than that. I set the height of the slider itself, but the thumb appears to be cut off (i.e. it doesn't scale down to the height that I specify in the slider.height property). I don't want to have to override the entire control template of the slider control to do this. There's got to be some way of setting a property or something like that.
Edit: Even when I create a custom slider style which includes the custom thumb style with the sizes I want, it still doesn't size right.
Any ideas?
<Slider.LayoutTransform>
<ScaleTransform ScaleY="0.9" CenterX="15" CenterY="15"/>
</Slider.LayoutTransform>
Not very sexy, but it works like a charm when combined whith the Slider.Height/Slider.Width properties !
Set thumb style:
<Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<!--<Ellipse
Name="Ellipse"
Fill="Yellow"
Stroke="Yellow"
Height="10"
Width="{Binding Path=ThumbWidth, RelativeSource={RelativeSource TemplatedParent}}"
StrokeThickness="1" />-->
<Rectangle
Fill="Azure"
Stroke="Azure"
Height="7"
Width="{Binding Path=ThumbWidth, RelativeSource={RelativeSource TemplatedParent}}"
StrokeThickness="1"
Margin="0.1,.1,.1,.1"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then use this style slider custom control
<Style TargetType="{x:Type local:NvSliderControl}">
<Setter Property="Orientation" Value="Vertical" />
<Setter Property="Height" Value="50"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:NvSliderControl}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Track x:Name="PART_Track" >
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumbStyle}">
</Thumb>
</Track.Thumb>
</Track>
</Grid>
</Border>
<ControlTemplate.Triggers>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So I'm making a custom window template for my WPF application. The trouble I'm having is that I cannot access the Window Title property inside the template.
I tried this:
<TextBlock Text="{TemplateBinding Title}" />
And this:
<TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}" />
Everything that I've read indicates that either of those two should work and yet the text is never set.
Any suggestions?
EDIT: Presenting the entire style xaml
<Style x:Key="RegularWindow" TargetType="{x:Type Window}">
<Setter Property="Foreground" Value="{StaticResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="AllowsTransparency" Value="True"/>
<Setter Property="WindowStyle" Value="None"/>
<Setter Property="SizeToContent" Value="WidthAndHeight"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Border BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="10" Background="{TemplateBinding Background}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="{TemplateBinding Title}" FontWeight="Bold" Grid.Row="0" />
<AdornerDecorator Grid.Row="1">
<ContentPresenter/>
</AdornerDecorator>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So it turns out that Expression Blend fails to render the window correctly. As soon as I run the code it actually works. My bad for trusting Expression Blend.
I created a button. My basic requirements are rounded thicker border, with more than one color (i.e. for Buy/Sell buttons)
I was hoping that i could create the template once, and than just override the border brush like this:
<Style x:Key="BorderButton">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderThickness="2"
BorderBrush="Red"
CornerRadius="3"
Background="{x:Null}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="GreenBorderButton" BasedOn="{StaticResource BorderButton}" TargetType="{x:Type Button}">
<Setter Property="BorderBrush" Value="Green" />
</Style>
but they both produce the same style.
Do i need to write out the whole template every time? seems like unnecessary code repetition (especially if 3-4 colors are desired). Hoping there is some way to inherit a template.
Your code is very close to working; the issue is that GreenBorderButton is applying the BorderBrush to the button itself, not the Border in the overridden Template.
To fix this, simply change the Border's BorderBrush to use the parent Button's BorderBrush. You can do this using a TemplateBinding like so:
<Style x:Key="BorderButton">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border"
BorderThickness="2"
BorderBrush="{TemplateBinding Property=BorderBrush}"
CornerRadius="3"
Background="{x:Null}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then, you can either use the same overridden styles like you have, or you could simply do:
<Button Style="{StaticResource BorderButton}" BorderBrush="Blue" Content="Blue" />
I have a ListView with a binding to a ObservableCollection. Further I am listing out all items in the ObservableCollection. Now, Is there a good way to check if the ObservableCollection is empty, and the display an alternative xaml?
You can use the HasItems dependency property of the ListView. With a trigger, when the property is false, you can change the ControlTemplate. Here is as example:
<ListView ItemsSource="{Binding Items}">
<ListView.Style>
<Style TargetType="{x:Type ListView}">
<Style.Triggers>
<Trigger Property="HasItems" Value="False">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListView}">
<Border SnapsToDevicePixels="true"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBlock Text="No items"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ListView.Style>
</ListView>