I have a WPF Window with a StatusBar control. Below is the xaml for my status bar. I am trying to place a Separator between the StatusBarItems. But what happens is that all the separators are positioned right after the first StatusBarItem.
How can I get the Separators to be positioned after each Item in the StatusBar?
I do notice that if I am not using the ItemsPanelTemplate that the separators work correctly. How can I get the separators in the below xaml to position correctly?
<StatusBar Grid.Row="2" Height="23" Name="myStatusBar" VerticalAlignment="Bottom" >
<StatusBar.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</StatusBar.ItemsPanel>
<StatusBarItem Grid.Column="0">
<StackPanel Orientation="Horizontal">
<Image Source="..\Images\bullet_green.png" Height="15" Width="15" />
<TextBlock Name="txtStatus" Height="18" Width="77" Text="{Binding StatusBarStatus}"/>
</StackPanel>
</StatusBarItem>
<Separator Width="1"/>
<StatusBarItem Grid.Column="1">
<StackPanel Orientation="Horizontal">
<Image Source="..\Images\user_add.png" Height="15" Width="15" />
<TextBlock Name="txtCurrentContact" Text="{Binding StatusBarCurrentContact}" />
</StackPanel>
</StatusBarItem>
<Separator Width="1"/>
<StatusBarItem Grid.Column="2">
<!--<ProgressBar Value="30" Width="80" Height="18"/>-->
<StackPanel Orientation="Horizontal">
<Image Source="..\Images\database03.png" Height="15" Width="15" />
<TextBlock Name="txtDatabase" Text="{Binding StatusBarDatabase}" />
</StackPanel>
</StatusBarItem>
<Separator Width="1"/>
<StatusBarItem Grid.Column="3">
<TextBlock Name="txtMode" Text="{Binding StatusBarMode}"/>
</StatusBarItem>
<StatusBarItem Grid.Column="4">
<TextBlock Name="txtTally" Text="{Binding StatusBarTally}"/>
</StatusBarItem>
</StatusBar>
All of your separators are in Column 0. Put them in a column ie:
<StatusBarItem Grid.Column="0">
<StackPanel Orientation="Horizontal">
<Image Source="..\Images\bullet_green.png" Height="15" Width="15" />
<TextBlock Name="txtStatus" Height="18" Width="77" Text="{Binding StatusBarStatus}"/>
</StackPanel>
</StatusBarItem>
<Separator Width="1" Grid.ColumnSpan="2" Grid.Column="0" HorizontalAlignment="Center"/>
<StatusBarItem Grid.Column="1">
<StackPanel Orientation="Horizontal">
<Image Source="..\Images\user_add.png" Height="15" Width="15" />
<TextBlock Name="txtCurrentContact" Text="{Binding StatusBarCurrentContact}" />
</StackPanel>
</StatusBarItem>
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've a ViewBox that's have this content:
<Viewbox Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" Stretch="Fill" >
<StackPanel Orientation="Vertical" >
<Label HorizontalAlignment="Center" Content="Latest Match" FontSize="10"/>
<TextBlock Background="WhiteSmoke" Width="300"/>
<TextBlock Background="WhiteSmoke" Margin="0,5,0,0" />
<TextBlock Background="WhiteSmoke" Margin="0,5,0,0" />
<TextBlock Background="WhiteSmoke" Margin="0,5,0,0" />
<TextBlock Background="WhiteSmoke" Margin="0,5,0,0" />
</StackPanel>
</Viewbox>
when I enlarge the window I get this:
how you can see the text Latest match seems compressed in width, how can I fix this having a text that doesn't compress in width?
You must set a different value to Stretch property of Viewbox.
Probably Uniform in you case.
See this link
Try this code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Viewbox Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" Stretch="Fill" >
<StackPanel Orientation="Vertical" >
<Label HorizontalAlignment="Center" Content="Latest Match" FontSize="10" />
<TextBlock Background="WhiteSmoke" Width="300"/>
<TextBlock Background="WhiteSmoke" Margin="0,5,0,0" />
<TextBlock Background="WhiteSmoke" Margin="0,5,0,0" />
<TextBlock Background="WhiteSmoke" Margin="0,5,0,0" />
<TextBlock Background="WhiteSmoke" Margin="0,5,0,0" />
</StackPanel>
</Viewbox>
</Grid>
I can't find a way to make these images in a scrollviewer horizontally.
They're like this
IMAGE1
IMAGE2
IMAGE3
I want
IMAGE1 IMAGE2 IMAGE3
So I can scroll them horizontally. I've already tried google and stackoverflow and I can't find a working solution :(
Code
<Window x:Class="TESSTTTTTT.MirrorWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MirrorWindow" HorizontalAlignment="Center" VerticalAlignment="Center" WindowStyle="None">
<Grid Name="grid2" HorizontalAlignment="Center" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Name="ColumnKinect">
<Image Name="camera2" Height="1800" Width="3200" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<!--
<Canvas Name="canvas2" Height="1800" Width="3200" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden" />-->
<Image Name="imgBodyFrame" Source="{Binding MainWindow.ImageSource}" Height="1800" Width="3200"/>
<!--Stretch="UniformToFill"-->
<Image Name="img3DBodyRotation" Source="{Binding MainWindow.ImageSource}" Height="1800" Width="3200" Visibility="Hidden"/>
</Grid>
<Grid Grid.Column="1" Height="1800" Width="3200" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="ColumnCatalogo">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" Name="scrollViewerCatalogo" Background="AliceBlue"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Visible">
<ItemsControl Grid.Row="0" Name="itemsControl" HorizontalAlignment="Center" VerticalAlignment="Stretch">
<ItemsControl Name="itcCatalogo" HorizontalContentAlignment="Left">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ListBox Width="Auto" Height="Auto" HorizontalContentAlignment="Left">
<WrapPanel Orientation="Horizontal" Width="Auto" Height="Auto">
<StackPanel Name="stpProduct" Orientation="Vertical">
<TextBlock Width="Auto" Height="Auto" Text="{Binding Nome}" Foreground="#006b66" FontFamily="Verdana" FontSize="14" FontWeight="ExtraBold"/>
<Image Width="400" Height="300" Source="{Binding PathImmagine}"/>
<TextBlock Width="Auto" Height="Auto" Foreground="#006b66" FontFamily="Verdana" FontSize="20" FontWeight="Bold">
<Run Text="Prezzo a partire da: "/>
<LineBreak/>
<Run Text="{Binding Prezzo}"/>
<Run Text="€"/>
</TextBlock>
<TextBlock Width="Auto" Height="Auto" Text="{Binding Rigidita}" Foreground="Gray" FontFamily="Verdana" FontSize="20" FontWeight="ExtraBold"/>
</StackPanel>
</WrapPanel>
</ListBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ItemsControl>
</ScrollViewer>
</Grid>
</Grid>
</Window>
I am not sure you are speaking about images, Image1 Image2 Image3. You would have mentioned them in the given code snippet. As I am not sure about the ques, I have added 2 scenarios.
Scenario 1: I could see 3 Image control in the 0th Column. If you need them to be shown horizontally, you could use StackPanel instead of Grid, and can use the Orientation property as Horizontal. or you need to add 3 columns to the 0th Column Grid, and you can add those images respectively.
Scenario 2: and in the 1st Grid, you have a scrollviewer, if you need the image controls to be visible horizontally inside those, the same you could use the Orientation property of StackPanel (stackpanel inside the wrappanel) to Horizontal instead of Vertical.
Hope this helps you.
<ScrollViewer HorizontalScrollBarVisibility="Visible">
<StackPanel Orientation="Horizontal">
<Button Content="Button1" Foreground="Red" />
<Button Content="Button2" Foreground="Red" />
<Button Content="Button3" Foreground="Red" />
<Button Content="Button4" Foreground="Red" />
<Button Content="Button5" Foreground="Red" />
<Button Content="Button6" Foreground="Red" />
</StackPanel>
</ScrollViewer>
Try this way, adding a custom panel template to your listbox that is horizontal.
<Window x:Class="TESSTTTTTT.MirrorWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MirrorWindow" HorizontalAlignment="Center" VerticalAlignment="Center" WindowStyle="None">
<Grid Name="grid2" HorizontalAlignment="Center" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Name="ColumnKinect">
<Image Name="camera2" Height="1800" Width="3200" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<!--
<Canvas Name="canvas2" Height="1800" Width="3200" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden" />-->
<Image Name="imgBodyFrame" Source="{Binding MainWindow.ImageSource}" Height="1800" Width="3200"/>
<!--Stretch="UniformToFill"-->
<Image Name="img3DBodyRotation" Source="{Binding MainWindow.ImageSource}" Height="1800" Width="3200" Visibility="Hidden"/>
</Grid>
<Grid Grid.Column="1" Height="1800" Width="3200" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="ColumnCatalogo">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" Name="scrollViewerCatalogo" Background="AliceBlue"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible">
<ItemsControl Grid.Row="0" Name="itemsControl" HorizontalAlignment="Center" VerticalAlignment="Stretch">
<ItemsControl Name="itcCatalogo" HorizontalContentAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ListBox Width="Auto" Height="Auto" HorizontalContentAlignment="Left">
<WrapPanel Orientation="Horizontal" Width="Auto" Height="Auto">
<StackPanel Name="stpProduct" Orientation="Vertical">
<TextBlock Width="Auto" Height="Auto" Text="{Binding Nome}" Foreground="#006b66" FontFamily="Verdana" FontSize="14" FontWeight="ExtraBold"/>
<Image Width="400" Height="300" Source="{Binding PathImmagine}"/>
<TextBlock Width="Auto" Height="Auto" Foreground="#006b66" FontFamily="Verdana" FontSize="20" FontWeight="Bold">
<Run Text="Prezzo a partire da: "/>
<LineBreak/>
<Run Text="{Binding Prezzo}"/>
<Run Text="€"/>
</TextBlock>
<TextBlock Width="Auto" Height="Auto" Text="{Binding Rigidita}" Foreground="Gray" FontFamily="Verdana" FontSize="20" FontWeight="ExtraBold"/>
</StackPanel>
</WrapPanel>
</ListBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ItemsControl>
</ScrollViewer>
</Grid>
</Grid>
</Window>
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>
I would like to create this layout in Silverlight. The text need to wrap around the picture :
The closest solution i find is that but this is not exactly what i would like.
<StackPanel Margin="0,0,0,20">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<StackPanel Orientation="Horizontal" >
<Image Source="{Binding Img}" MaxWidth="100" />
<TextBlock Text="{Binding Desc}" TextWrapping="Wrap" Margin="0,10,0,5" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
Best I can come up with is to use a grid
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="40" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<TextBlock Text="Title" Grid.Row="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" />
<TextBlock Text="Image" Grid.Row="1" Grid.Column="0" />
<TextBlock Text="Description" TextWrapping="Wrap" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" />
</Grid>
Another Suggestion would be to use the RichTextBox. I got not too bad results using
<RichTextBox Width="400" Height="400" FontSize="40">
<Paragraph>
<InlineUIContainer >
<Image Source="/image.png" Width="100" Height="200" />
</InlineUIContainer>
<Run Text="A simple RichTextBox with Image: " />
<Italic Foreground="YellowGreen">Some Italic Text Here!</Italic>
</Paragraph>
</RichTextBox>