I want to present a string containing line breaks in a TextBox, but I want the TextBox to show it as a single line. Removing the line breaks is not an option; they need to be preserved, also after editing the text.
In the example below, when typing in the first TextBox, the text must be presented in the second TextBox in a single line. When editing the text in the second TextBox, the line breaks in the first TextBox must be preserved.
Does anyone know if this is possible?
<Grid Background="AliceBlue">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<TextBox x:Name="FirstTextBox"
AcceptsReturn="True"
TextWrapping="Wrap"
Text="{Binding MyString}"
Width="150"/>
<TextBox x:Name="SecondTextBox"
Grid.Row="1"
AcceptsReturn="False"
TextWrapping="NoWrap"
Text="{Binding MyString}"
VerticalAlignment="Top"/>
</Grid>
I created a binding converter that works for my scenario: Line-breaks are replaced with the unicode zero width space character (U+200B):
public class IgnoreLinebreaksConverter : IValueConverter
{
private const string Sub = " \u200B";
private const string Lb = "\r\n";
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var s = (string)value;
return string.IsNullOrEmpty(s) ? s : Regex.Replace(s, Lb, Sub);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
var s = (string)value;
return string.IsNullOrEmpty(s) ? s : Regex.Replace(s, Sub, Lb);
}
}
You could text-encode the linebreaks using \n (using a Binding.Converter), then you can replace those sequences with actual line-breaks if needed (in ConvertBack), in terms of usability that would be questionable though.
Related
Hello i need create part of my table be like passwordbox(I mean, text must be hide using for example *)
This is part of my table
<GridViewColumn Header="Password" Width="80">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock HorizontalAlignment="Center" Text="{Binding Path=Password}" Foreground="Black"></TextBlock>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
when i will add for example "cat", i will get explicit cat but i want get ***, and then if i will referred to this part of table i want to get this 'cat'
thx for help
Why not display fixed amount of stars for each row? This way you are not revealing information like password length. Does it really matter if number of stars equals password's length when you are never showing it?
<TextBlock HorizontalAlignment="Center" Text="****" Foreground="Black"></TextBlock>
In case you need length to match then write similar converter:
public class StarsConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value == null) return null;
var paswordLength = (value as string).Length;
var symbol = (parameter ?? "*").ToString().First();
return new string(symbol, paswordLength);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
in XAML you can provide additional parameter with symbol which is used to display password, but it will default to *
<TextBlock Text="{Binding pass,Converter={StaticResource ResourceKey=passConverter},ConverterParameter=^}" />
would like two controls to take up all the available space and be of exact same size. Also, when changing one controls visibility to collapsed I want the other control to take up the space. How is it possible?
The following xaml will make sure the controls are of same height and fill the space. But the space is taken by the two rows regardless of the visibility of the controls.
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Name="t1" Grid.Row="0" Text="first" />
<TextBlock Name="t2" Grid.Row="1" Text="second" />
</Grid>
Any help is much appreciated
Hard to do with Silverlight stock panels. Think about implementing a StretchPanel.
About SL StretchPanel implementations:
SO question and answer and blog post linked from there
If you have small fixed amount of this controls then you can also use alternative solution, which is to bind row height to controls visibility.
To do that we can modify your example like this:
<Grid>
<Grid.Resources>
<local:VisibilityToRowHeightConverter x:Key="visibilityToRowHeightConverter" />
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="{Binding Visibility, ElementName=t1, Converter={StaticResource visibilityToRowHeightConverter}}" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Name="t1" Text="first" />
<TextBlock Name="t2" Grid.Row="1" Text="second" />
</Grid>
And the converter code:
public class VisibilityToRowHeightConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if (value is Visibility)
return ((Visibility) value) == Visibility.Visible
? new GridLength(1, GridUnitType.Star)
: new GridLength(0);
return value;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
So every time t1 collapses, corresponding RowDefinition will set it`s value to 0 and return in to one star when t1 is shown again.
I can't think of a way to do what you want, using any of the built-in panel controls.
A simple hack would be to update the number of row definitions each you update the visibility:
int numberOfRows = grid.Children.Count(item => item.Visibility == Visibility.Visible);
grid.RowDefinitions.Clear();
for (int i=0 ; i<numberOfRows ; i++)
grid.RowDefinitions.Add(new RowDefinition());
This will ensure that the visible children share the vertical space equally.
A more robust approach would be to build your own Panel control -- might be worth the effort if you use this kind of layout a lot.
I'm having a hard time with grid splitter. I've bound the RowDefinition.Height dependency property to the clr property of the model as presented below.
<Grid.RowDefinitions>
<RowDefinition Height='{Binding Path=Height, Mode=OneWay}' />
<RowDefinition Height='*' />
</Grid.RowDefinitions>
This works fine just until the GridSplitter is used. When the height of the row is changed manually with GridSplitter, it replaces the binding with the new fixed size (and removes the binding).
Have you got any ideas or workarounds how to create two rows that would be resizable with GridSplitter but still change their height according to the clr property/binding?
I think the problem is that your source Property Height is of type double and RowDefinition.Height is of type GridLength. Use a converter and it'll work TwoWay
<Grid.RowDefinitions>
<RowDefinition Height="{Binding Path=Height,
Mode=TwoWay,
Converter={StaticResource DoubleGridLengthConverter}}"/>
<!--...-->
</Grid.RowDefinitions>
DoubleGridLengthConverter
public class DoubleGridLengthConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return new GridLength((double)value);
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
GridLength gridLength = (GridLength)value;
return gridLength.Value;
}
}
Update
Uploaded my sample application here: http://www.mediafire.com/download.php?pgibb205d65596q
Set the RowDefinition.Height by entering a value in the lower TextBox and resize the RowDefinition.Height with the GridSplitter
Under the View-Model-ViewModel pattern for WPF, I am trying to databind the Heights and Widths of various definitions for grid controls, so I can store the values the user sets them to after using a GridSplitter. However, the normal pattern doesn't seem to work for these particular properties.
Note: I'm posting this as a reference question that I'm posting as Google failed me and I had to work this out myself. My own answer to follow.
Create a IValueConverter as follows:
public class GridLengthConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
double val = (double)value;
GridLength gridLength = new GridLength(val);
return gridLength;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
GridLength val = (GridLength)value;
return val.Value;
}
}
You can then utilize the converter in your Binding:
<UserControl.Resources>
<local:GridLengthConverter x:Key="gridLengthConverter" />
</UserControl.Resources>
...
<ColumnDefinition Width="{Binding Path=LeftPanelWidth,
Mode=TwoWay,
Converter={StaticResource gridLengthConverter}}" />
There were a number of gotchas I discovered:
Although it may appear like a double in XAML, the actual value for a *Definition's Height or Width is a 'GridLength' struct.
All the properties of GridLength are readonly, you have to create a new one each time you change it.
Unlike every other property in WPF, Width and Height don't default their databinding mode to 'TwoWay', you have to manually set this.
Thusly, I used the following code:
private GridLength myHorizontalInputRegionSize = new GridLength(0, GridUnitType.Auto)
public GridLength HorizontalInputRegionSize
{
get
{
// If not yet set, get the starting value from the DataModel
if (myHorizontalInputRegionSize.IsAuto)
myHorizontalInputRegionSize = new GridLength(ConnectionTabDefaultUIOptions.HorizontalInputRegionSize, GridUnitType.Pixel);
return myHorizontalInputRegionSize;
}
set
{
myHorizontalInputRegionSize = value;
if (ConnectionTabDefaultUIOptions.HorizontalInputRegionSize != myHorizontalInputRegionSize.Value)
{
// Set the value in the DataModel
ConnectionTabDefaultUIOptions.HorizontalInputRegionSize = value.Value;
}
OnPropertyChanged("HorizontalInputRegionSize");
}
}
And the XAML:
<Grid.RowDefinitions>
<RowDefinition Height="*" MinHeight="100" />
<RowDefinition Height="Auto" />
<RowDefinition Height="{Binding Path=HorizontalInputRegionSize,Mode=TwoWay}" MinHeight="50" />
</Grid.RowDefinitions>
The easiest solution is to simply use string settings for these properties so that WPF will automatically support them using GridLengthConverter without any extra work.
Another possibility, since you brought up converting between GridLength and int, is to create an IValueConverter and use it when binding to Width. IValueConverters also handle two-way binding because they have both ConvertTo() and ConvertBack() methods.
Say I want a TextBlock to have its Width equal to it's Parent container's Width (ie, stretch from side to side) or a percentage of it's Parent Container Width, how can I accomplish this in XAML without specifying absolute values?
I want to do this so that if the Parent Container container is later on expanded (its' Width increased), its' Child Elements will also be expanded automatically. (basically, like in HTML and CSS)
You can put the textboxes inside a grid to do percentage values on the rows or columns of the grid and let the textboxes auto-fill to their parent cells (as they will by default). Example:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" />
<TextBox Grid.Column="1" />
</Grid>
This will make #1 2/5 of the width, and #2 3/5.
The way to stretch it to the same size as the parent container is to use the attribute:
<Textbox HorizontalAlignment="Stretch" ...
That will make the Textbox element stretch horizontally and fill all the parent space horizontally (actually it depends on the parent panel you're using but should work for most cases).
Percentages can only be used with grid cell values so another option is to create a grid and put your textbox in one of the cells with the appropriate percentage.
Typically, you'd use a built-in layout control appropriate for your scenario (e.g. use a grid as a parent if you want scaling relative to the parent). If you want to do it with an arbitrary parent element, you can create a ValueConverter do it, but it probably won't be quite as clean as you'd like. However, if you absolutely need it, you could do something like this:
public class PercentageConverter : IValueConverter
{
public object Convert(object value,
Type targetType,
object parameter,
System.Globalization.CultureInfo culture)
{
return System.Convert.ToDouble(value) *
System.Convert.ToDouble(parameter);
}
public object ConvertBack(object value,
Type targetType,
object parameter,
System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
Which can be used like this, to get a child textbox 10% of the width of its parent canvas:
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<local:PercentageConverter x:Key="PercentageConverter"/>
</Window.Resources>
<Canvas x:Name="canvas">
<TextBlock Text="Hello"
Background="Red"
Width="{Binding
Converter={StaticResource PercentageConverter},
ElementName=canvas,
Path=ActualWidth,
ConverterParameter=0.1}"/>
</Canvas>
</Window>
For anybody who is getting an error like : '2*' string cannot be converted to Length.
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" /><!--This will make any control in this column of grid take 2/5 of total width-->
<ColumnDefinition Width="3*" /><!--This will make any control in this column of grid take 3/5 of total width-->
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition MinHeight="30" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0">Your text block a:</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="0">Your text block b:</TextBlock>
</Grid>
IValueConverter implementation can be used. Converter class which takes inheritance from IValueConverter takes some parameters like value (percentage) and parameter (parent's width) and returns desired width value. In XAML file, component's width is set with the desired value:
public class SizePercentageConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (parameter == null)
return 0.7 * value.ToDouble();
string[] split = parameter.ToString().Split('.');
double parameterDouble = split[0].ToDouble() + split[1].ToDouble() / (Math.Pow(10, split[1].Length));
return value.ToDouble() * parameterDouble;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
// Don't need to implement this
return null;
}
}
XAML:
<UserControl.Resources>
<m:SizePercentageConverter x:Key="PercentageConverter" />
</UserControl.Resources>
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Disabled"
Width="{Binding Converter={StaticResource PercentageConverter}, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Border}},Path=ActualWidth}"
Height="{Binding Converter={StaticResource PercentageConverter}, ConverterParameter=0.6, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Border}},Path=ActualHeight}">
....
</ScrollViewer>
I use two methods for relative sizing. I have a class called Relative with three attached properties To, WidthPercent and HeightPercent which is useful if I want an element to be a relative size of an element anywhere in the visual tree and feels less hacky than the converter approach - although use what works for you, that you're happy with.
The other approach is rather more cunning. Add a ViewBox where you want relative sizes inside, then inside that, add a Grid at width 100. Then if you add a TextBlock with width 10 inside that, it is obviously 10% of 100.
The ViewBox will scale the Grid according to whatever space it has been given, so if its the only thing on the page, then the Grid will be scaled out full width and effectively, your TextBlock is scaled to 10% of the page.
If you don't set a height on the Grid then it will shrink to fit its content, so it'll all be relatively sized. You'll have to ensure that the content doesn't get too tall, i.e. starts changing the aspect ratio of the space given to the ViewBox else it will start scaling the height as well. You can probably work around this with a Stretch of UniformToFill.
I know it's not XAML, but I did the same thing with SizeChanged event of the textbox:
private void TextBlock_SizeChanged(object sender, SizeChangedEventArgs e)
{
TextBlock textBlock = sender as TextBlock;
FrameworkElement element = textBlock.Parent as FrameworkElement;
textBlock.Margin = new Thickness(0, 0, (element.ActualWidth / 100) * 20, 0);
}
The textbox appears to be 80% size of its parent (well right side margin is 20%) and stretches when needed.