WPF Textbox FlowDirection + HorizontalContentAlignment issue - wpf

I have a Control template targeting the ComboBox (TargetType="{x:Type ComboBox}")
In this template is a TextBox:
<TextBox x:Name="PART_EditableTextBox"
FlowDirection="RightToLeft"
HorizontalContentAlignment="Left"
IsReadOnly="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}"
Margin="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
/>
My initial issue was the text in the TextBox was cut off at the front of the sentence and showing the end of the sentence.
That is when I added the flow direction in, it solved my original issue but created a new one.
In the TextBox, short text is now Right aligned and no longer left aligned.
Is there an issue setting both FlowDirection + HorizontalContentAlignment in wpf TextBoxes?
and if so, is there a work around?

Try setting HorizontalAlignment="Left" for the TextBox. This way short text will be left aligned as well
<TextBox x:Name="PART_EditableTextBox"
FlowDirection="RightToLeft"
HorizontalAlignment="Left"
... />

Try
<TextBox x:Name="PART_EditableTextBox"
FlowDirection="RightToLeft"
TextAlignment="Right"
... />
Since, FlowDirection is changed we need to set TestAlignment to 'Right' instead of 'Left'

Related

Disabling a controls FocusVisualStyle?

I'm trying to disable the FocusVisualStyle of a newly created textbox. As far as I understand you just need to add: FocusVisualStyle="{x:Null}" but for some reason the border of the textbox is still changing. The full thing is:
<TextBox FocusVisualStyle="{x:Null}" Height="82" HorizontalAlignment="Left" Margin="142,264,0,0" Name="textBox1" VerticalAlignment="Top" Width="169" BorderBrush="Black" />
Did I do something wrong?
Try setting BorderThickness="0" , better yet create a trigger when does that when IsFocused = True

Stop WPF TextBox from growing

I have spent two hours researching how to avoid that my WPF TextBox Control grows when a long text has been typed in, but I have not been able to do it, even I have read some answers about it like these ones:
stopping-wpf-textbox-from-growing-with-text
wpf-allow-textbox-to-be-resized-but-not-to-grow-on-user-input
wpf-how-to-stop-textbox-from-autosizing
My code is the following:
<Grid>
<TextBox Margin="6,6,8,28" Name="textBox1" AcceptsTab="True" TextWrapping="Wrap" VerticalScrollBarVisibility="Visible" AcceptsReturn="True"/>
<CheckBox Content="Case sensitive" HorizontalAlignment="Left" Margin="7,0,0,2" Name="checkBox1" Height="16" VerticalAlignment="Bottom" />
</Grid>
One thing that I tried was:
MaxWidth={Binding ElementName=MyGrid, Path=ActualWidth}
But it did not work for me.
I also tried to add the following property to the Grid:
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Or
<Border x:Name="b" Grid.Column="1"/>
<TextBox Width="{Binding ActualWidth, ElementName=b}" ....... />
But it did not work either.
I need my control to grow when the user stretches the window, but not to when a long text is inserted.
Do you have a different answer for this problem that I might try?
UPDATE!
I have noticed something very strange: If I stretch manually the window, the textbox stops growing when a long text is inserted. That's fine. But I need to achieve this without having to stretch the window every time I run the program
Remove TextBox border and put it into ScrollViewer.
Try to do next:
<ScrollViewer MaxHeight={Binding ElementName=MyGrid, Path=ActualWidth} BorderThickness="0">
<TextBox Margin="6,6,8,28" Name="textBox1" AcceptsTab="True" TextWrapping="Wrap" AcceptsReturn="True"/>
</ScrollViewer>

How to add a border to the Text inside a TextBlock in WPF?

I am kinda new to WPF, dont know if the question is weird. I wanted to know if its possible to add a border around the text inside a textBlock.
EDIT:
As per suggestion I have tried both but without much success:
<Border BorderBrush="#FF0B232F" BorderThickness="2">
<TextBlock HorizontalAlignment="Left" Text="TextBlock" TextWrapping="Wrap" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" OpacityMask="Black"/>
</Border>
and
<Label BorderBrush="#FF0B232F" BorderThickness="2,2,2,2" Content="TextBlock" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" />
Am I doing something wrong here?
In such cases I use Label or TextBlock placed in Border.
Both your approaches are correct, however, if you have the textblock/label inside a grid (or any other container) declared as you have, its contents will stretch.
Try setting the VerticalAlignment and/or HorizontalAlignment to an appropriate setting (Top/Left, Center)..
something like this:
<Border BorderBrush="#FF0B232F" BorderThickness="2" VerticalAlignment="Top">
<TextBlock HorizontalAlignment="Left" Text="TextBlock" TextWrapping="Wrap" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" OpacityMask="Black"/>
</Border>
Assuming that you are asking for a full size TextBlock with a border overlay within the bounds of the TextBlock you could wrap it in a Grid and draw the borders over the top of the TextBlock like this...
<Grid HorizontalAlignment="Left">
<TextBlock Text="TextBlock" TextWrapping="Wrap" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" OpacityMask="Black" />
<Border BorderBrush="#FF0B232F" BorderThickness="2" />
</Grid>
Because we haven't specified the grid row and column on the TextBlock and Border objects the border overlays on top of the TextBlock.
if you just want to have a border around your textblock or any other control use :
<Border>
<TextBlock></TextBlock>
</Border>
you set border properties like color ,cornerradius ,thickness,...

How to measure a canvas that has auto height and width

I'm a beginner in silverlight so i hope i can get an answer that brings me some more light in the measure process of silverlight.
I found an interessting flap out control from silverlight slide control
and now I try to use it in my project. So that the slide out is working proper, I have to place the user control on a canvas. The user control then uses for itself the height of its content. I just wanna change that behavior so that the height is set to the available space from the parent canvas.
You see the uxBorder where the height is set. How can I measure the actual height and set it to the border?
I tried it with Height={Binding ElementName=notificationCanvas, Path=ActualHeight} but this dependency property has no callback, so the actualHeight is never set.
What I want to achieve is a usercontrol like the tweetboard per example on Jesse Liberty's blog
Sorry for my English writing, I hope you understand my question.
<Canvas x:Name="notificationCanvas" Background="Red">
<SlideEffectEx:SimpleSlideControl GripWidth="20" GripTitle="Task" GripHeight="100">
<Border x:Name="uxBorder"
BorderThickness="2"
CornerRadius="5"
BorderBrush="DarkGray"
Background="DarkGray"
Padding="5" Width="300"
Height="700"
>
<StackPanel>
<TextBlock Text="Tasks"></TextBlock>
<Button x:Name="btn1" Margin="5" Content="{Binding ElementName=MainBorder, Path=Height}"></Button>
<Button x:Name="btn2" Margin="5" Content="Second Button"></Button>
<Button x:Name="btn3" Margin="5" Content="Third Button"></Button>
<Button x:Name="btn1_Copy" Margin="5" Content="First Button"/>
<Button x:Name="btn1_Copy1" Margin="5" Content="First Button"/>
<Button x:Name="btn1_Copy2" Margin="5" Content="First Button"/>
<Button x:Name="btn1_Copy3" Margin="5" Content="First Button"/>
<Button x:Name="btn1_Copy4" Margin="5" Content="First Button"/>
<Button x:Name="btn1_Copy5" Margin="5" Content="First Button"/>
<Button x:Name="btn1_Copy6" Margin="5" Content="First Button"/>
</StackPanel>
</Border>
</SlideEffectEx:SimpleSlideControl>
Hey - a couple of things:
I'm guessing it's just a typo, but: "{Binding ElementName=MainBorder, Path=Height}" should be "{Binding ElementName=uxBorder, Path=Height}" (or ActualHeight)
The SlideEffect appears to set a clip geometry, which is going to affect how "big" it looks
RectangleGeometry clipRect = new RectangleGeometry();
clipRect.Rect = new Rect(0, 0, panel.ActualWidth, host.Height);
host.Clip = clipRect;
If you comment out the above lines from the slide control, you should see a noticeable change in how big the panel looks.
I think that the ActualWidth or ActualHeight properties are not settable only gettable.
For that you won't be able to use binding, maybe if you create the element after the page has been loaded, since the Canvas Actual Size on the moment of the creation will be unknown.
Why don't you try creating a Property for this, with two way binding, and sign the Canvas event on layoutUpdated and update the value of the property, therefore updating all dependent objects.
I Don't know if this event is the right one, by check if it help's you.

WPF Groupbox header position alignment

Is it possible to set the position alignment for a GroupBox Header in WPF? The default is to place in the top left corner of the GroupBox outline but I would like it to be centered at the top. I know that you can set the properties of the text using:
<GroupBox Grid.Row="1" HorizontalAlignment="Center">
<GroupBox.Header>
<TextBlock Text="Cash Match" Foreground="Black" FontWeight="Bold"/>
</GroupBox.Header>
</GroupBox>
But I'm looking to set the position of it with respect to the GroupBox outline.
It's simple! Just edit Template of GroupBox:
In Blend, do the following :
Right click GroupBox > Edit Template > Edit a Copy > OK
Search for following section:
<Border x:Name="Header" Padding="3,1,3,0"
Grid.Column="1" Grid.Row="0" Grid.RowSpan="2">
...
</Border>
Change Grid.Column to 2
Also set HorizontalAlignment="Right"
You have just aligned the header to right!!! But bot the white gap behind it. For that,
Now search for following section :
<Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4" Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3">
<Border.OpacityMask>
...
</Border.OpacityMask>
...
</Border>
Add RenderTransformOrigin="0.5,0.5" to the border
Just above , add following code (this will shift the "white gap" behind header to right:
<Border.RenderTransform>
<ScaleTransform ScaleX="-1"/>
</Border.RenderTransform>
You are done! You just got a GroupBox with right aligned header!!!
Please tell me if this is what you required.
Changing the group-box-header alinment will result in non-OS-conform controls.
Therefore, I think you won't be able to change this using the default styles. A custom template will solve your problem.

Resources