WPF ContentControl does not collaspe on Visibility change - wpf

I have a tab sequence that I want to be able to split into two regions or recombine into a single tab sequence. The application will start off with one tab sequence
Allow the user to split into a second panel
And recombine into a single tab control.
At this stage, I should get the same display at the first image. But, instead, the ContentControl does not Collaspe and space is left in the main Grid. There is also a GridSplitter that devides the two areaa (white bar in image 2). That seems to Collapse as expected. Is there some trick to get it to get the ContentControl to Collapse?
Here's the XAML. There's a boolean property BottomTabDisplayed which indicates if there are any controls in the bottom area:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl x:Name="ControlContainerTopTab" Grid.Row="0">
<TabControl SelectedIndex="{Binding SelectedIndex}"
>
<TabControl.ItemContainerStyle>
...
</TabControl.ItemContainerStyle>
</TabControl>
</ContentControl>
<GridSplitter x:Name="GridSplitterTabControls"
Grid.Row="1"
Height="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Visibility="{Binding BottomTabDisplayed,
Converter={StaticResource VisiblityToBoolConverter}}" />
<ContentControl Grid.Row="2" Visibility="{Binding BottomTabDisplayed, Converter={StaticResource VisiblityToBoolConverter}}">
<TabControl SelectedIndex="{Binding SelectedBottomIndex}"
Visibility="{Binding BottomTabDisplayed,
Converter={StaticResource VisiblityToBoolConverter}}"
>
<TabControl.ItemContainerStyle>
...
</TabControl.ItemContainerStyle>
</TabControl>
</ContentControl>
</Grid>
Edit 1:
And, here's the converter
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
bool isVisible = (bool)value;
return (isVisible ? Visibility.Visible : Visibility.Collapsed);
}
I just noticed something interesting, if the GridSplitter is unchanged, it works as expected. If I move the GridSplitter, then I get the empty space.
Edit 2:
Snoop changes when moving the GridSplitter

If you look at your code for VisiblityToBoolConverter, you will very likely see it is returning Hidden instead of Collapsed

Related

Expandable ListView's height exceed the window height

I have a user control ListView1.xaml which looks something like this:
<Grid>
<ListView ItemSource="{Binding}">
...
</ListView>
</Grid>
In my window I use this control 3 times. Something like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Expander Grid.Row="0" VerticalAlignment="Top">
<local:ListView1 DataContext="{Binding Source1}"/>
</Expander>
<Expander Grid.Row="1" VerticalAlignment="Top">
<local:ListView1 DataContext="{Binding Source2}"/>
</Expander>
<Expander Grid.Row="2" VerticalAlignment="Top">
<local:ListView1 DataContext="{Binding Source3}"/>
</Expander>
</Grid>
When I set Height="*" for each Grid.Row, it would divide the space into 3 equally. It is taking empty space even when the first 2 tabs are not expanded:
If I set Height="auto", it would have what I am looking for: when a tab is collapsed, only the expanded one is taking place:
But one problem with Height="auto" is that there is no scrollbar on the ListView because the height of the ListView is expanding beyond the height of the window.
How would I be able to keep the expanders behave that way and have scrollbar for each ListView when the content is larger that the window?
I would consider a tabcontrol for this sort of UI.
Part of the problem is the grid isn't sizing to it's parent when all it's rows are auto.
If you change from using a grid to a dockpanel then you will get scrollbars.
When you expand the second expander then you'll have to decide what you want to happen though. You'd have to close the first or recalculate what size you want each to be in code.
But I think this is a lot closer to usable.
My minimal reproduction uses listboxes.
<DockPanel>
<Expander DockPanel.Dock="Top">
<ListBox ItemsSource="{Binding IntList}"/>
</Expander>
<Expander DockPanel.Dock="Top">
<ListBox ItemsSource="{Binding IntList}"/>
</Expander>
<Expander DockPanel.Dock="Top">
<ListBox ItemsSource="{Binding IntList}"/>
</Expander>
</DockPanel>
And my viewmodel:
public partial class MainWindowViewModel : ObservableObject
{
public List<int> IntList { get; set; } = new();
public MainWindowViewModel()
{
for (int i = 0; i < 300; i++)
{
IntList.Add(i);
}
}

WPF XAML ListView - Make TextBlock Text wrap

I have a ListView with ListView.ItemTemplate like this
<ListView
x:Name="myList"
BorderBrush="Transparent"
ItemsSource="{Binding MyItems}"
SelectedIndex="0"
ScrollViewer.CanContentScroll="True"
ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="5,5,5,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/> <--THIS WILL FORCE WRAPPING
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding FilePath}"
Grid.Row="0" Margin="3,3,3,3"
Style="{StaticResource MyFilePathTextLabel}"
TextWrapping="WrapWithOverflow"/> <-- THIS WILL NOT WRAP TEXT
<StackPanel Orientation="Horizontal" Grid.Row="1" Margin="3,3,3,3">
<TextBlock Text="Lab location: "/>
<TextBlock Text="{Binding LabLocation}"
Style="{StaticResource MyLabLocationTextLabel}"/>
</StackPanel>
...
...
</DataTemplate>
</ListView.ItemTemplate>
...
...
</ListView>
This will show ListView items like this:
----------------------------------
C:/samples/folderA/myfile1.txt <-- NO WRAP AS IT FITS
Lab location: Chemistry Lab 301
----------------------------------
C:/samples/folderA/folderB/fold
erC/folderD/folderE/folderF/myf
ile2.txt <-- WRAP SINCE NOT FITTING
Lab location: Chemistry Lab 301
----------------------------------
C:/samples/folderA/folderB/myfi
le3.txt <-- WRAP SINCE NOT FITTING
Lab location: Chemistry Lab 301
----------------------------------
C:/samples/folderA/folderB/fold
erC/folderD/folderE/folderF/fol
derG/folderH/folderI/folderJ/fo
lderK/myfile4.txt <-- WRAP SINCE NOT FITTING
Lab location: Chemistry Lab 301
----------------------------------
C:/samples/myfile5.txt <-- NO WRAP AS IT FITS
Lab location: Chemistry Lab 301
----------------------------------
Above, each item show file location as wrapped if it does not fit the width of the ListView.
UPDATE:
Updated XAML
UPDATE 2:
Setting the column Width of grid container to hardcoded value of will force wrapping (see above commented line). But since form is resizable, the grid and ListView is also resizable. Therefore, I can not hardcode width. It needs to wrap according to the current size of the form.
Set the HorizontalContentAlignement="Stretch" on the ListView object itself to tell it to stretch it's Content horizontally to fit available space, and set the HorizontalScrollBarVisiblilty to Disabled to make sure horizontal scrolling is disabled.
<ListView x:Name="myList" ...
HorizontalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
If you use a Grid and set <ColumnDefinition Width="*">, the GridColumn enlarges as much as possible to fill all the available space. Only and only after that, other operations like wrapping take place.
In this case, the GridColumn becomes large enough to contain all the text on a single line. And that's the reason why the text doesn't wrap: it doesn't need to wrap! It has all the space it needs to stay on a single line!
SOLUTION: Set a fixed column width, as 200, or 100, or anyway try a smaller width, and see the result. At some point the text MUST wrap, with a GridColumn thin enough.
SOLUTION FOR FLEXIBLE WIDTH:
You have to bind the Width of the inner Grid (the one with the RowDefinitions) to the ActualWidth of the outer Grid (the one with the ColumnDefinitions).
Create a converter like this:
public class OuterGridToInnerGridWidthConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return ((double)value) / 2;
}
}
In this example I suppose that the inner Grid has half the Width of the outer. If instead you have the column of the Grid with Width="*" and the second column with a fixed width of - for example - 50, the converter can be:
public class OuterGridToInnerGridWidthConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return ((double)value) - 50;
}
}
Made this, add this attribute to the inner Grid:
Width="{Binding ActualWidth,
RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}},
Converter={StaticResource OuterGridToInnerGridWidthConverter}}"
Finally, set HorizontalContentAlignment="Stretch" for the ListView.
This works both when you make the window smaller or bigger: the TextBlock resizes and wraps correctly.
Can you try to have the first RowDefinition like :
<RowDefinition Height="Auto"/>
instead of
<RowDefinition Height="*"/>
?
If no success, try temporarily removing the
Style="{StaticResource MyFilePathTextLabel}"
also. You did not share its code, so I'm thinking it might break the wrapping.

WPF TextBox Wrapping

I am trying to figure out how to get a textbox to wrap its contents, however the situation isn't quite the same as the typical "it doesn't wrap" scenario. My textbox is contained inside a DataTemplate which is used inside a Telerik RadTabControl instance (using a ContentTemplatePresenter to determine which view to display) and the XAML for the DataTemplate looks like this:
<DataTemplate x:Key="NotesTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="Use the box below to record any general notes associated with this item." Style="{StaticResource Default}" />
<TextBox TextWrapping="Wrap" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" GridRow="1" Margin="20" Text="{Binding Notes, UpdateSourceTrigger=PropertyChanged}" />
</Grid>
</DataTemplate>
The reason I say it doesn't fall under the normal "it doesn't wrap" scenario is it used to wrap until I had to change the view to be resizable to anything to support the varying screen sizes the app will be run on. When I did that the TextBox stopped wrapping because (presumably) as the user types something the TextBox says "I need more space" so the parent obliges and the box continues out to the right indefinitely (although the view gets scrollbars). I tried setting a MaxWidth using Binding/RelativeSource, but since the parent is specifically designed to grow that approach won't work. What I need to have happen is the box should be the width of its' containing parents' VisibleWidth. Meaning, if the Window itself is 1024x768, the TextBox's MaxWidth should be 1024 and any text thereafter would automatically wrap, but if the Window grows to 1280x1024 the box should now be 1280 and the text wrap accordingly. I tried this scenario with this binding expression, but no luck:
MaxWidth="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}, Path=ActualWidth}"
The Window size itself isn't growing so if I could get the Window's Width (minus a certain amount to cover the width of the tabs that are part of the TabControl) I believe that would work.
Any ideas?
although the view gets scrollbars
Disable the horizontal scrollView, so it will be forced to wrap. You can try to disable it on the TextBox itself, or on the wrapping Grid.
<DataTemplate x:Key="NotesTemplate">
<Grid ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="Use the box below to record any general notes associated with this item." Style="{StaticResource Default}" />
<TextBox TextWrapping="Wrap" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" Grid.Row="1" Margin="20" Text="{Binding Notes, UpdateSourceTrigger=PropertyChanged}" />
</Grid>
</DataTemplate>

Prevent a TextBox from horizontal expanding in WPF

I have the following style defined in my App.xaml
<Style x:Key="textBoxMultiline" TargetType="{x:Type TextBox}" >
<Setter Property="VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="HorizontalScrollBarVisibility" Value="Hidden" />
<Setter Property="MinHeight" Value="50" />
<Setter Property="TextWrapping" Value="Wrap" />
</Style>
And throughout the solution we're using it on every text box that needs a brief text.
<TextBox x:Name="textBoxDescription" Grid.Row="2" Grid.Column="1" Style="{DynamicResource textBoxMultiline}" />
Everything works great, but then the client complains about some fields were corped on older monitors with lower resolutions, so I placed a ScrollViewer on one of the higher visual tree nodes to prevent the corping.
<ScrollViewer Height="Auto" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
...
</ScrollViewer>
Strangely, the TextBoxes with the above style start expanding to the right instead of wrapping the text.
Is there a way to prevent this without removing the ScrollViewer?
If you don't want to hard code the width then you can go for element binding the width of the parent item.
Here I am binding TextBox MaxWidth with ScrollViewer actual width. You also have to make sure that the ColumnDefinition width should be set to "*" not to "Auto". If you set it to Auto it will neglect the ScrollViewer width and keep on expanding the width of ScrollViewer and TextBox. I think you fall in this case...
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ScrollViewer HorizontalScrollBarVisibility="Auto" Name="scv">
<TextBox Height="30" TextWrapping="Wrap" MaxWidth="{Binding ElementName=scv, Path=ActualWidth}"></TextBox>
</ScrollViewer>
</Grid>
You must define a MaxWidth for the TextBox, otherwise there's no limit because the ScrollViewer.
The solution provided from #bathineni helped me solve my problem. Here is what worked for me:
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Width="30" Height="23" Margin="10,5" Content="..."/>
<ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Disabled" verticalScrollBarVisibility="Disabled" Name="scv">
<TextBox Height="25" Text="Insert here long text" MaxWidth="{Binding ElementName=scv, Path=ActualWidth}" HorizontalAlignment="Stretch" />
</ScrollViewer>
</Grid>
I tried the aforementioned examples and they didn't work so, I solved the problem myself. There are two ways of solving this issue:
The first solution is implemented in XAML using data bindings. I advice you not to bind the control by itself. The XAML solution is implemented by binding a control with the desired ActualWidth and ActualHeight proprieties to the textbox MaxHeight and MaxWidth proprieties.
<TextBlock x:Name="PasswordText" Margin="0,0,0,20" FontFamily="Bahnschrift SemiBold Condensed" Text="PASSWORD" FontSize="20">
<TextBox x:Name="PasswordTextBox" MaxWidth="{Binding ElementName=PasswordText, Path=ActualWidth}" MaxHeight="{Binding ElementName=PasswordText, Path=ActualHeight}">
The next solution is implemented by generating a Loaded event in XAML, creating it in the C# code and then setting within the Loaded event the MaxWidth and MaxHeight proprieties of the textbox as the textbox ActualWidth and ActualHeight proprieties.
// It doesn't have a problem like in XAML if you pass the textbox its own
// ActualWidth and ActualHeight to the MaxWidth and MaxHeight proprieties.
private void Log_In_Page_Loaded(object sender, RoutedEventArgs e)
{
UsernameTextBox.MaxHeight = UsernameTextBox.ActualHeight;
UsernameTextBox.MaxWidth = UsernameTextBox.ActualWidth;
}
Choose the one that suits your design better, but I think, in my opinion, that this is the most effective, simple, stable and effective way of solving this problem.
Works for me. If you want scrollbars to appear in the textbox, you may add
HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
to the TextBox
You must set MaxWidth of the Container Control
<Grid x:Name="RootGrid" Margin="6,6,8,8" Width="500" MaxWidth="500">
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<GroupBox Name="contentGroup" Header="Content" Grid.Row="0">
<TextBox Name="content"/>
</GroupBox>
</Grid>
</ScrollViewer>
I ran into this problem when I needed my TextBox to stretch along with its auto-sized Grid column when it got resized, meaning MaxWidth wouldn't work, but still needed to prevent the TextBox from stretching along with its contents.
What I ended up doing was linking this event handler to SizeChanged:
private void TextBox_SizeChanged(object sender, SizeChangedEventArgs e) {
TextBox textBox = (TextBox)sender;
if (textBox.CanUndo && e.NewSize.Width > e.PreviousSize.Width) {
textBox.Width = e.PreviousSize.Width;
}
}
Writing text to a textbox is something that the user can Undo, whereas other actions that can cause resizing (initial drawing of the element, stretching of parent container, etc) aren't Undoable from within the textbox. Thus, by checking CanUndo we can determine whether SizeChanged was triggered by writing text or something else.
The e.NewSize.Width > e.PreviousSize.Width check is necessary because without it the SizeChanged event will infinitely be called from within itself, because to revert the stretching we need to change the size back to the original, which would itself trigger the event.
It's a little hacky but I haven't run into any issues yet.
I am not sure why but I could not get the ScrollViewer solution to work. I needed to have a TextBox with a fixed initial width to implement a numeric up/down control - in this control the TextBox was shrinking and growing independent of the input which looks very annoying if the UI changes as you type.
So, I found the below solution using 2 textboxes to work for me. The first textbox is the textbox displayed for the user to type their input and the 2nd textbox is initialized through a dependency property (DisplayLength) and the converter shown further below.
Binding the MaxWidth property of the 1st TextBox to the Width property of the 2nd TextBox fixes the size such that users can type what they want but the displayed width of the textbox will not change even if there is more UI space available.
<TextBox x:Name="PART_TextBox"
Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Value}"
Margin="0,0,1,0"
TextAlignment="Right"
AcceptsReturn="False"
SpellCheck.IsEnabled="False"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Center"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
MaxWidth="{Binding ElementName=TBMeasure, Path=ActualWidth}"
/>
<!-- Hidden measuring textbox ensures reservation of enough UI space
according to DisplayLength dependency property
-->
<TextBox x:Name="TBMeasure"
Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DisplayLength, Converter={StaticResource ByteToPlaceHolderStringConverter}}"
Margin="0,0,1,0"
TextAlignment="Right"
AcceptsReturn="False"
SpellCheck.IsEnabled="False"
HorizontalContentAlignment="Right"
VerticalContentAlignment="Center"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Visibility="Hidden"/>
// Converter
[ValueConversion(typeof(byte), typeof(string))]
public sealed class ByteToPlaceHolderStringConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if ((value is byte) == false)
return Binding.DoNothing;
byte byteVal = (byte)value;
string retString = string.Empty;
for (int i = 0; i < byteVal; i++)
retString = retString + "X";
return retString;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return Binding.DoNothing;
}
}

Wrapping panels in WPF

I have the following layout in my window:
Grid with two columns
GridSplitter which resizes grid columns
Second grid column is filled with StackPanel
StackPanel is oriented vertically and has 2 children: TextBlock and a WrapPanel
WrapPanel has two Grids as children
First Grid child contains one Image
Second Grid contains a StackPanel with 3 TextBlocks oriented vertically.
The XAML code looks like this:
<Window>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Left" />
<StackPanel Grid.Column="1" Margin="5,0,0,0" Orientation="Vertical"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock Text="Now here's a silly poem for you." />
<WrapPanel>
<Grid Name="GridForImage">
<Image Width="200" Height="200" Source="Image.jpg" />
</Grid>
<Grid Name="GridForText">
<StackPanel Orientation="Vertical">
<TextBlock TextWrapping="WrapWithOverflow" Text="Roses are red." />
<TextBlock TextWrapping="WrapWithOverflow" Text="Violets are blue." />
<TextBlock TextWrapping="WrapWithOverflow" Text="You belong in a zoo." />
</StackPanel>
</Grid>
</WrapPanel>
</StackPanel>
</Grid>
</Window>
Once the window opens, the second column is wide enough to allow grids GridForImage and GirdForText to be placed next to each other horizontally. If I shrink the width of the second column using the grid splitter, the GridForText grid gets placed underneath the GridForImage at one point, which is quite expected.
Here's what I would like to achieve:
I want GridForText to shrink its width to a certain size and to remain positioned to the right of the GridForImage, as I move the grid splitter to the right side of the window. Then, when the width shrinks to a certain value, say 200px, it should get placed underneath the GridForImage, i.e. WrapPanel should do its magic. Right now, the GridForText doesn't resize at all, it just gets placed underneath when it's current width becomes too large for the width of the WrapPanel.
When the GridForText does get placed underneath the GridForImage, I want GridForImage to fill the entire width of the WrapPanel's width.
Is all this possible and what should I do? Thank you all.
You're essentially trying to use two distinct layout modes so you just need to set up the two distinct states in your layout and then add bindings or triggers to switch between them at the point when you want to switch modes (i.e. width = 200). Using a Grid is the most flexible and gives you a lot more control over the relative sizes but requires more settings and would work best in a ControlTemplate or DataTemplate where you can use Triggers to set a bunch of things at once based on a condition.
Here's a more compact example using UniformGrid with some Bindings and a converter. I removed the fixed sizing on the Image - try Stretch="Fill" if you care more about filling width than aspect ratio. I also changed one StackPanel to a DockPanel to maintain vertical stretching for its children and added a Background to one of the TextBlocks just to show how much Width it's really getting:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Left" />
<DockPanel Grid.Column="1" Margin="5,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock Text="Now here's a silly poem for you." DockPanel.Dock="Top"/>
<UniformGrid Rows="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth, Converter={x:Static local:LayoutModeConverter.Row}, ConverterParameter=200}"
Columns="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth, Converter={x:Static local:LayoutModeConverter.Column}, ConverterParameter=200}">
<Image Source="Image.jpg" />
<StackPanel Orientation="Vertical">
<TextBlock TextWrapping="WrapWithOverflow" Text="Roses are red." Background="Red" />
<TextBlock TextWrapping="WrapWithOverflow" Text="Violets are blue." />
<TextBlock TextWrapping="WrapWithOverflow" Text="You belong in a zoo." />
</StackPanel>
</UniformGrid>
</DockPanel>
</Grid>
And the converter:
public class LayoutModeConverter : IValueConverter
{
public static readonly LayoutModeConverter Row = new LayoutModeConverter { RowMode = true };
public static readonly LayoutModeConverter Column = new LayoutModeConverter { RowMode = false };
public bool RowMode { get; set; }
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
double width = System.Convert.ToDouble(value);
double targetWidth = System.Convert.ToDouble(parameter);
if (RowMode)
return width > targetWidth ? 1 : 2;
else
return width > targetWidth ? 2 : 1;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}

Resources