This is my sample code ,Please help me to achieve both goals simultaneouslyImage
On click toggle button collapse and visible column and vertical split button.
In the below fig. First add toggle button and First column contain two column .
It contains second sub column is collapse or disable based on toggle button click.
and Spltter is working on outside two main column please help me as soon as possible
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="5"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="300"/>
</Grid.ColumnDefinitions>
<Border Background="Green"
Grid.Column="0">
<Grid Grid.Column="1"
Visibility="{Binding IsChecked, ElementName=toggleButton, Converter={StaticResource BooleanToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<WrapPanel Grid.Column="1"
Background="Aqua" />
</Grid>
</Border>
<ToggleButton x:Name="toggleButton"
Width="30"
Height="30"
Margin="0,10,10,0"
IsChecked="True"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
</Grid>
<GridSplitter Width="5"
Grid.Column="1"
ResizeBehavior="CurrentAndNext" />
<Grid Grid.Column="2"></Grid>
</Grid>
From reading your question, I believe this is what you are trying to achieve. Please let me know if I didn't understand you properly.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="5" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border
Grid.Column="0"
Background="Green">
<ToggleButton x:Name="toggleButton"
Width="30"
Height="30"
Margin="0,10,10,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
IsChecked="True" />
</Border>
<Grid
Grid.Column="1"
MaxWidth="300"
Visibility="{Binding ElementName=toggleButton, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}">
<WrapPanel Background="Aqua">
<TextBlock
Margin="8"
Text="Item 01" />
<TextBlock
Margin="8"
Text="Item 02" />
<TextBlock
Margin="8"
Text="Item 03" />
<TextBlock
Margin="8"
Text="Item 04" />
<TextBlock
Margin="8"
Text="Item 05" />
</WrapPanel>
</Grid>
<GridSplitter
Grid.Column="1"
Width="5"
Visibility="{Binding ElementName=toggleButton, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}" />
<Grid Grid.Column="3">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="Column 2" />
</Grid>
</Grid>
Related
I am creating a XAML page that loads inside of a Frame control. It included an Expander control. I need for the Expander and all contents of the Expander to resize horizontally as the user resized the window. Does anyone have any suggestions, please?
<Grid>
<StackPanel x:Name="Stackpanel1" HorizontalAlignment="Stretch" Margin="8,8,0,10" Orientation="Horizontal" VerticalAlignment="Stretch">
<Expander ExpandDirection="Right" IsExpanded="True" Expanded="Expander_Expanded">
<Expander.Header>
<TextBlock Text="Daily" RenderTransformOrigin=".5,.5">
<TextBlock.LayoutTransform>
<RotateTransform Angle="90" />
</TextBlock.LayoutTransform>
</TextBlock>
</Expander.Header>
<StackPanel Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
Margin="8,0,16,0" Height="610">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0" Width="Auto">
<materialDesign:Card Grid.Column="1" Padding="5" UniformCornerRadius="8" Margin="0,5,0,0" >
<StackPanel Orientation="Horizontal"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
Margin="8,24,16,24">
<TextBox x:Name="txtReprint" MinWidth="300"/>
<Button x:Name="btnReprint" Content="Re-Print" Margin="10,0,0,0" Width="156" Click="btnReprint_Click"/>
</StackPanel>
</materialDesign:Card>
</Grid>
<materialDesign:Card Grid.Column="0" Grid.Row="1" Padding="5" UniformCornerRadius="8" Margin="0,5,0,0" VerticalAlignment="Top" Height="508">
<StackPanel Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
Margin="8,0,16,0" VerticalAlignment="Top">
<Label x:Name="lblPriority" Content="Priority" VerticalAlignment="Top"/>
<DataGrid x:Name="dgvPriority" Width="467" Height="414"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnPriorityRefresh" Content="Refresh" Grid.Column="0" Margin="5,10,5,0" Click="btnPriorityRefresh_Click"/>
<Button x:Name="btnPriorityPrint" Content="Print" Grid.Column="1" Margin="5,10,5,0" Click="btnPriorityPrint_Click"/>
</Grid>
</StackPanel>
</materialDesign:Card>
<materialDesign:Card Grid.Column="1" Grid.Row="1" Padding="5" UniformCornerRadius="8" Margin="5,5,0,0" VerticalAlignment="Top" Height="508">
<StackPanel Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
Margin="8,0,16,0" VerticalAlignment="Top">
<Label x:Name="lblGround" Content="Ground" VerticalAlignment="Top"/>
<DataGrid x:Name="dgvPGround" Width="467" Height="414" HorizontalAlignment="Stretch"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnGroundRefresh" Content="Refresh" Grid.Column="0" Margin="5,10,5,0" Click="btnGroundRefresh_Click"/>
<Button x:Name="btnGroundPrint" Content="Print" Grid.Column="1" Margin="5,10,5,0" Click="btnGroundPrint_Click"/>
</Grid>
</StackPanel>
</materialDesign:Card>
</Grid>
</StackPanel>
</Expander>
<Border Background="{DynamicResource MaterialDesignDivider}" Width="1" VerticalAlignment="Stretch" SnapsToDevicePixels="True" />
<Expander ExpandDirection="Right" Expanded="Expander_Expanded">
<Expander.Header>
<TextBlock Text="Special Projects" RenderTransformOrigin=".5,.5">
<TextBlock.LayoutTransform>
<RotateTransform Angle="90" />
</TextBlock.LayoutTransform>
</TextBlock>
</Expander.Header>
<materialDesign:Card Grid.Column="1" Grid.Row="1" Padding="5" UniformCornerRadius="8" Margin="5,5,5,5" VerticalAlignment="Top" Height="603">
<StackPanel Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
Margin="8,24,16,3">
<Label x:Name="lblSpecialProjects" Content="Special Projects"/>
<DataGrid x:Name="dgvNAB" Width="467" Height="477" Margin="0,5,0,0"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnNABRefresh" Content="Refresh" Grid.Column="0" Margin="5,10,5,0" Click="btnNABRefresh_Click"/>
<Button x:Name="btnNABPrint" Content="Print" Grid.Column="1" Margin="5,10,5,0" Click="btnNABPrint_Click"/>
</Grid>
</StackPanel>
</materialDesign:Card>
</Expander>
</StackPanel>
</Grid>
Instead of a StackPanel you could use a Grid and create columns. Each Expander you put in a separate column and that way you can make them adjust according to the window size.
I got trouble with the listbox. Please, check the screenshot down there. The last element is kind of "eaten" by the listbox external border (I defined appropriate MaxHeight). Can someone help me?
<DataTemplate x:Key="QCTemplate">
<Grid>
<Expander x:Name="expander" Header="{Binding}">
<Expander.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBox Name="ComponentNameTextBlock" Style="{StaticResource BorderlessTextBoxStyle}" Text="{Binding ComponentName, Mode=TwoWay}" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="1">Количество цитат:</TextBlock>
<TextBlock Name="ComponentVolumeTextBlock" Grid.Column="1" Margin="1" Text="{Binding Volume}" />
</Grid>
</StackPanel>
</DataTemplate>
</Expander.HeaderTemplate>
<!-- Контекстное меню экспандера -->
<Expander.ContextMenu>
<ContextMenu>
<MenuItem Header="Оригинал 'My Clippings.txt'">
<MenuItem Header="Удалить из оригинала..."
Command="{StaticResource ResourceKey=DeleteFromMyClippingsCommand}"
CommandParameter="{Binding}" />
</MenuItem>
</ContextMenu>
</Expander.ContextMenu>
<!-- Внутреннее содержание экспандера -->
<Grid Name="ExpanderContentContainer"
Height="{Binding ElementName=ComponentChildsListBox, Path=ActualHeight}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Grid.Column="0" Grid.Row="0"
Width="2" Height="{Binding Path=ActualHeight}"
Fill="Black"
Margin="2"
/>
<StackPanel Orientation="Vertical"
Grid.Column="1" Grid.Row="0">
<TextBox Name="ComponentCommentTextBox"
Text="{Binding Comment, Converter={StaticResource ResourceKey=QCCCommentConvrtr}, Mode=TwoWay}"
BorderThickness="0"
GotFocus="ComponentCommentTextBox_GotFocus"
Margin="1"
/>
<ListBox Name="ComponentChildsListBox"
BorderBrush="Transparent"
ItemsSource="{Binding ChildsCollection}"
ScrollViewer.CanContentScroll="False"
MaxHeight="300"
Margin="1"
Style="{StaticResource LibraryViewListBoxStyle}"
/>
</StackPanel>
</Grid>
</Expander>
</Grid>
</DataTemplate>
Screenshot
How can separate TreeViewItem in few parts with Grid.Column or anything else to like in the picture: One part to be Label, second part to be Image, third part to be empty place and last part to be CheckBox (for example).
enter image description here
And my results is too different from this what I need to make, here is the picture with my results.
enter image description here
And part of my code:
<Border Name="SensorsOption" BorderThickness="0 2 2 2" BorderBrush="#dce3e2" Background="#dce3e2" Grid.Column="0" Grid.Row="3" Grid.RowSpan="2" Margin="0 2 0 0">
<ScrollViewer>
<Border Name="InsideSensorOption" BorderThickness="2 0 2 2" BorderBrush="#dce3e2" Background="#dce3e2" Grid.Column="0" Grid.Row="3" Grid.RowSpan="2">
<StackPanel Orientation="Vertical" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible">
<Label Content="Sensors"
Background="#ebf0f0"
Foreground="#1d2326"
FontWeight="Bold"
FontSize="12"
BorderBrush="#dae3e2"
BorderThickness="0 0 0 2"
Padding="25 6 6 6"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="21*" />
<ColumnDefinition Width="43*" />
<ColumnDefinition Width="17*" />
<ColumnDefinition Width="15*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50*" />
<RowDefinition Height="50*" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Source="https://cdn0.iconfinder.com/data/icons/good-weather-1/96/weather_icons-64-32.png" Height="24" Width="24" />
<Label Grid.Column="1" Grid.Row="0" Content="T1 S1" />
<CheckBox Grid.Column="3" Grid.Row="0" VerticalAlignment="Center" IsChecked="{Binding AirIsChecked}" />
<TreeView Grid.Row="1" Grid.ColumnSpan="4">
<TreeViewItem>
<TreeViewItem.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="68*" />
<ColumnDefinition Width="13*" />
<ColumnDefinition Width="19*" />
</Grid.ColumnDefinitions>
<Label Content="Value" Grid.Column="0" />
<Image Grid.Column="1" Source="http://www.metalsaber.com/images/main_images/rss.gif" Width="30" Height="15" />
<CheckBox Grid.Column="2" IsChecked="{Binding AirValueIsChecked}" />
</Grid>
</TreeViewItem.Header>
</TreeViewItem>
</TreeView>
</Grid>
</StackPanel>
</Border>
</ScrollViewer>
</Border>
It is possible by using Margin property:
<TreeView >
<TreeViewItem>
<TreeViewItem.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="68*" />
<ColumnDefinition Width="13*" />
<ColumnDefinition Width="19*" />
</Grid.ColumnDefinitions>
<Label Content="Value" Grid.Column="0" />
<TextBlock Text="Hello" Margin="100,0,0,0" Grid.Column="1"/>
<CheckBox Grid.Column="2" IsChecked="{Binding AirValueIsChecked}" />
</Grid>
</TreeViewItem.Header>
</TreeViewItem>
</TreeView>
As MSDN says:
The margin is the space between this element and other elements that
will be adjacent when layout creates the user interface (UI). Shared
elements might be peer elements (such as other elements in the
collection of a common parent control), or might also be this
element's parent.
The final column of the below grid view is not displaying in the center vertically, though the first image is and they use the same lookup method to find the image source (A resource dictionary object locator class I have). The final image (CurrencyImg) has the bottom of the image aligned with the middle of the row, so it stretches out of view upwards and doesn't fill the lower half of the row. Confused!
<Grid Name="grdCustomer" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition Width="220" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="18"/>
</Grid.RowDefinitions>
<Image Source="{y:ImageStaticResource {Binding IconString}}" Margin="0,0,0,0" VerticalAlignment="Center" ></Image>
<TextBlock Grid.Column="1" Text="{Binding CustomerDesc}" VerticalAlignment="Center" />
<TextBlock Name="tbTxnCount" Grid.Column="2" Text="{Binding TxnCount}" VerticalAlignment="Center" />
<TextBlock Name="tbAmount" Style="{StaticResource myCustStyleColor}" Grid.Column="3" Text="{Binding Amount}" HorizontalAlignment="Right" VerticalAlignment="Center" />
<TextBlock Name="tbCurrency" Grid.Column="4" Text="{Binding Currency}" HorizontalAlignment="Right" VerticalAlignment="Center" />
<Image Name="imgCurrency" Grid.Column="5" Margin="0,0,0,0" Source="{y:ImageStaticResource {Binding CurrencyImg}}" VerticalAlignment="Center" />
</Grid>
I have a StackPanel, but the following line :
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Notes}" TextWrapping="Wrap" />
is not Wrapping the Text.
<StackPanel Orientation="Vertical">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="15" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" Grid.Column="0">
<TextBlock FontWeight="Bold" Padding="0,0,5,0" Text="{Binding Path=Id, StringFormat='#\{0\}'}" />
<TextBlock FontWeight="Bold" Padding="0,0,5,0" Text="{Binding Path=Name}" />
</DockPanel>
<TextBlock Grid.Row="0" Grid.Column="4" FontWeight="Bold" Text="{Binding Path=Time, StringFormat={}{0:HH:mm}}" />
<Image
Grid.Row="0"
Grid.Column="6"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="{Binding Path=Image, Mode=OneWay, Converter={StaticResource ImageConverter}}" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Notes}" TextWrapping="Wrap" />
<Image
Grid.Row="1"
Grid.Column="4"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Source="{Binding Path=Picture, Mode=OneWay, Converter={StaticResource PictureConverter}}" />
</Grid>
</StackPanel>
The StackPanel Orientation is set to 'Vertical' but the TextBlock is not inheriting it.
Where am I going wrong?
Your problem is using the StackPanel that allows its children to fill in all the available space - the StackPanel stretches accordingly to the size of its content. Try removing the StackPanel and keep just the Grid - this way you will limit the size of its children to the available space used by the Grid.
If that isn't enough in the layout you've built, try setting a MaxWidth on the TextBox that needs wrapping.
Now the source of your problem was also the fact that your TextBox was inserted in the first Column of the Grid that had an infinite size (Width="Auto"). Thus, setting the Grid.Column="7" to the TextBox did the trick you wanted (wrapping text). Here's the revised code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="15" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" Grid.Column="0">
<TextBlock FontWeight="Bold" Padding="0,0,5,0" Text="{Binding Path=Id, StringFormat='#\{0\}'}" />
<TextBlock FontWeight="Bold" Padding="0,0,5,0" Text="{Binding Path=Name}" />
</DockPanel>
<TextBlock Grid.Row="0" Grid.Column="4" FontWeight="Bold" Text="{Binding Path=Time, StringFormat={}{0:HH:mm}}" />
<Image
Grid.Row="0"
Grid.Column="6"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="{Binding Path=Image, Mode=OneWay, Converter={StaticResource ImageConverter}}" />
<TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="7" Text="{Binding Notes}" TextWrapping="Wrap" />
<Image
Grid.Row="1"
Grid.Column="4"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Source="{Binding Path=Picture, Mode=OneWay, Converter={StaticResource PictureConverter}}" />
</Grid>