I have the following code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentControl x:Name="MainContent" Grid.Column="0">
Some content
</ContentControl>
<GridSplitter Grid.Column="1" Width="5"/>
<ContentControl Content="{Binding ElementName=MainContent, Path=Content}" Grid.Column="2"/>
</Grid>
This shows the content of the first ContentControl in both sides.
If I change the "Some content" text to any control it shows the content only in the second ContentControl and not in both.
In my case I need to put there a web browser that will show the same content at a level that if you are watching a movie in one and press pause, it will pause on both.
Is this possible?
Related
I've got a window with a ListBox containing TextBlocks in the template:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
...
<ListBox x:Name="AnnotationsList" ScrollViewer.VerticalScrollBarVisibility="Visible" Grid.Row="1" Grid.ColumnSpan="3">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="20*"/>
</Grid.ColumnDefinitions>
<Label Content="{Binding DateAdded}" Grid.Column="0"/>
<TextBlock Text="{Binding Description}" TextWrapping="Wrap" Grid.Column="1"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
I expected the TextBlock to adjust the size, with both elements in the template filling the width together in 1/20 proportions.
Instead, the TextBlock never gets smaller and ListBox gets a horizonal scrollbar.
How can I keep the list scrollable vertically and make sure the text gets narrower and wraps if I resize the window?
As Clemens answered in the comments, HorizontalScrollBarVisibility has an option of Disabled, which doesn't affect just the visibility, but actually triggers the children elements to get limited by the horizontal size of the container.
I have Loaded 3 radio button inside the Grid panel using the column definition(each with in a specific column) On this time i have noticed that the arrow key navigation is not properly Working. But the Tab and shift+tab Navigation are working as per the expectations. That the same is working fine while loading the radio button inside the stack panel. After the various inspection i have noticed that the issue occurs while Using Horizontal alignment property of the Radio button as Left. It give the same odd behavior for all the option except stretch.Can anyone describe how to resolve this issue.
I have tried applying of Group Name to the Radio Button also
<Grid Grid.Row="0" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="16"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="16"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="12"/>
</Grid.ColumnDefinitions>
<RadioButton Content="Automatic" Grid.Column="1"
HorizontalAlignment="Stretch"
IsChecked="{Binding Path=SelectedSizeType, Converter={StaticResource EnumBoolConverter}, ConverterParameter=Apple}"/>
<RadioButton Content="Manual" Grid.Column="3"
HorizontalAlignment="Stretch"
IsChecked="{Binding Path=SelectedSizeType, Converter={StaticResource EnumBoolConverter}, ConverterParameter=Mango}"/>
<RadioButton Content="Customizable" Grid.Column="5" x:Name="Customizable"
HorizontalAlignment="Stretch"
IsChecked="{Binding Path=SelectedSizeType, Converter={StaticResource EnumBoolConverter}, ConverterParameter=Carrot}"/>
</Grid>
You can try to set the attached property KeyboardNavigation.DirectionalNavigation on the grouping container element to force a certain navigation behavior according to it's KeyboardNavigationMode value.
The following example sets KeyboardNavigation.DirectionalNavigation to KeyboardNavigationMode.Local on the containing Grid:
<Grid KeyboardNavigation.DirectionalNavigation="Local" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="16"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="16"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="12"/>
</Grid.ColumnDefinitions>
<RadioButton Content="Automatic" Grid.Column="1"
HorizontalAlignment="Left" />
<RadioButton Content="Manual" Grid.Column="3"
HorizontalAlignment="Left" />
<RadioButton Content="Customizable" Grid.Column="5" x:Name="Customizable"
HorizontalAlignment="Left" />
</Grid>
Hello Stackoverflowers !
I'm creating a list with a searchbar in XAML, and when i tried to use my new UserControl in MainWindow.xaml, the Button in the UserControl is cropped in the designer instead of being resized to fit, why is that ?
Here is the MainWindow.xaml body :
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="8*" />
</Grid.ColumnDefinitions>
<controls:SearchBox Grid.Column="0"/>
</Grid>
And here is the body of the custom control :
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="8*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox
Grid.Row="0"
VerticalAlignment="Center"
Text="Search"
TextBlock.FontStyle="Italic"
TextBlock.TextAlignment="Left"
/>
<!-- Content="{StaticResource FilterLogo}" -->
<Button
Grid.Column="1"
Content="Filter"
VerticalAlignment="Center"
HorizontalAlignment="Stretch">
</Button>
<ListBox
Grid.Row="1"
Grid.ColumnSpan="2"
ItemsSource="{Binding DataContext}"
SelectedItem="{Binding DataContext}"
ScrollViewer.VerticalScrollBarVisibility="Visible">
</ListBox>
I don't really know why my control is cropped to be honest. Any lead please ?
Short answer: it doesn't fit.
You have two columns in your main window. Since you have not specified which column to place the UserControl, it defaults to the first column. But your Width definitions force that column to be one fourth the size of the second column.
Your SearchBox simply doesn't fit in the space you have allotted to it.
If you remove the star (*) from this line:
<ColumnDefinition Width="8*" />
...it will fit without being cropped. (Alternatively, you could place the user control in the second column, or expand the main window, or shrink the width of your UserControl.)
When using stars in the column and row definitions, use them like percentages. Like this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".1*" /> <!-- 10% -->
<ColumnDefinition Width=".9*" /> <!-- 90% -->
</Grid.ColumnDefinitions>
This is what the XAML reader interpreted from your usage:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" /> <!-- 800% -->
<ColumnDefinition Width="*" /> <!-- 100% -->
</Grid.ColumnDefinitions>
This will have undesired results.
I want to use a grid, stretched across the entire available area, as the content for a RadioButton, and I want the RadioButton's bullet to be vertically aligned.
Getting the grid to stretch across the entire area is easy enough, I just set the HorizontalContentAlignment property on the RadioButton:
<RadioButton HorizontalContentAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock>Foo</TextBlock>
<TextBox Grid.Column="1"/>
<TextBlock Grid.Row="1">The quick brown fox</TextBlock>
<TextBox Grid.Row="1" Grid.Column="1"/>
</Grid>
</RadioButton>
And following Simon Weaver's answer to this older question, I can vertically align the radio button's bullet relatively easily:
<RadioButton HorizontalContentAlignment="Stretch">
<TextBlock Grid.IsSharedSizeScope="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock>Foo</TextBlock>
<TextBox Grid.Column="1"/>
</Grid>
<LineBreak/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1">The quick brown fox</TextBlock>
<TextBox Grid.Row="1" Grid.Column="1"/>
</Grid>
</TextBlock>
</RadioButton>
The trouble is, having done that, the content no longer stretches.
How can I get a vertically aligned bullet and a stretching grid?
The TextBlock is being stretched properly, but the grid inside it is not. Presumably that's just the way TextBlock works.
The following is a bit hacky, but it works:
<RadioButton HorizontalContentAlignment="Stretch">
<TextBlock Name="Text" Grid.IsSharedSizeScope="True">
<Grid Width="{Binding ElementName=Text, Path=ActualWidth}">
This would work for the visual effect. You didn't list any functional requirements so i'm not sure if it will work for you without some event mapping or not.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<RadioButton Grid.Column="0" Grid.RowSpan="2" Content=""/>
<TextBlock Grid.Column="1">Foo</TextBlock>
<TextBox Grid.Column="2"/>
<TextBlock Grid.Row="1" Grid.Column="1">The quick brown fox</TextBlock>
<TextBox Grid.Row="1" Grid.Column="2"/>
</Grid>
I have a Grid containing a ScrollViewer containing AccessText. I want the AccessText to take up the full width of the ScrollViewer, which should take up the full width of the Grid, without any overflow. Currently, the contents of my AccessText are cut off on the right side of the screen instead of wrapping. I have tried setting AccessText.TextWrapping to Wrap, WrapWithOverflow, and I've also tried removing the property entirely. I switched to using a Grid instead of a StackPanel because I thought that might affect how the contents are sized, but that hasn't helped. Here's what I have:
<Grid MaxHeight="40">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Whee a label:" Grid.Column="0"/>
<ScrollViewer Grid.Column="1" VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto">
<AccessText Text="{Binding MyLongTextField}"/>
</ScrollViewer>
</Grid>
When you set ColumnDefinition Width to Auto, the ScrollViewer within it won't be limited by the "visible Width" of the Column, so it will still take up as much horizontal space as it needs. With the xaml you posted, I think Width="*" will suit your needs. For the ScrollViewer, it seems like you don't want it to be able to Scroll horizontaly but only verticaly? In that case, set HorizontalScrollBarVisibility="Disabled". Otherwise you'll get a Horizontal ScrollBar.
<Grid MaxHeight="40">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Whee a label:" Grid.Column="0"/>
<ScrollViewer Grid.Column="1" VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Disabled">
<AccessText TextWrapping="Wrap" Text="{Binding MyLongTextField}"/>
</ScrollViewer>
</Grid>
If you simply want the AccessText to wrap indefinitely, modify your second ColumnDefinition from Auto to * and move the AccessText outside of the ScrollViewer as seen below...
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Whee a label:" Grid.Column="0"/>
<AccessText Grid.Column="1" TextWrapping="Wrap" Text="{Binding MyLongTextField}"/>
</Grid>
The reason the text would not wrap is because the second ColumnDefinition was set to Auto; which essentially does not force a bounds around the AccessText.
If you want to keep the ScrollViewer try this...
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Whee a label:" Grid.Column="0"/>
<ScrollViewer Grid.Column="1" VerticalScrollBarVisibility="Auto">
<AccessText TextWrapping="Wrap" Text="{Binding MyLongTextField}"/>
</ScrollViewer>
</Grid>
This ended up giving me what I wanted:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Whee a label:" Grid.Column="0"/>
<ScrollViewer Grid.Column="1" MaxHeight="40"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<AccessText Text="{Binding CRData.Error}" TextWrapping="Wrap"/>
</ScrollViewer>
</Grid>
Thanks to Meleak and Aaron for the suggestion of using * for the column width instead of Auto, and to Meleak for suggesting Disabled for the horizontal scrollbar instead of Auto.