I have this code:
<controls:PivotItem Header="Hledat">
<Canvas Margin="0">
<TextBox Name="SearchTxb" Height="72" Text="" VerticalAlignment="Top" HorizontalAlignment="Right" />
<Button Name="SearchBtn" Margin="0,74,100,0" Width="200" Height="72" Click="SearchBtn_Click" HorizontalAlignment="Right" VerticalAlignment="Top">Hledat</Button>
</Canvas>
</controls:PivotItem>
and I want to support Portrait and Landscape. This should be pivotitem for search. I want to textbox to change width to full size of phone screen and I want to button set position to f.e. 20 from right side. What should I add to code? Thanks
<controls:PivotItem Header="Hledat">
<Grid Margin="0">
<Grid.ColumnDefinition>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinition>
<TextBox Grid.Column="0" Name="SearchTxb" Height="72" Text="" VerticalAlignment="Top" HorizontalAlignment="Stretch" />
<Button Grid.Column="1" Name="SearchBtn" Margin="0,74,100,0" Width="200" Height="72" Click="SearchBtn_Click" HorizontalAlignment="Right" VerticalAlignment="Top">Hledat</Button>
</Grid>
</controls:PivotItem>
Related
I have a similar structure in a WPF app:
<Grid Background="White">
<StackPanel>
<TextBlock Text="1234567" FontSize="18" FontWeight="Bold" Height="25" TextAlignment="Center"/>
<Line X1="0" Y1="0" X2="160" Y2="0" Stroke="Gray" StrokeThickness="2"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.3*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Width="25" Height="25" Grid.Column="0" Source="img.png" />
<TextBlock Grid.Column="1" Text="3456789" FontSize="18" FontWeight="Bold" Height="25" TextAlignment="Center"/>
</Grid>
</StackPanel>
This results in the following layout:
Is there any way to place the bottom text in the center of the row, so it's alignment would match with the text above?
Or is there a solution to place the image on top of the bottom row on the left side without column definitions?
Thanks
Use a single-cell grid with different alignments. You will run the risk of long text being under the image, and you will have to set a Width value on the StackPanel. See the HorizontalAlignment flag below:
<Grid>
<TextBlock Text="3456789" FontSize="18" FontWeight="Bold" Height="25" HorizontalAlignment="Center"/>
<Image Width="25" Height="25" Source="img.png" HorizontalAlignment="Left" />
</Grid>
I am new with WPF please keep that in mind. I am trying to Make the Window Responsive to Resize, Is it possible that my controls such as textboxes and buttons are Resized as window grows or shrinks?
<Window x:Class="WPF_Working_Experimenet.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="216.586" Width="459.256">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="156*"/>
<ColumnDefinition Width="295*"/>
</Grid.ColumnDefinitions>
<Label Content="username :" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="66,27,0,0" Height="30" Width="63" FontFamily="B Nazanin" FontSize="15" Grid.Column="1"/>
<Label Content="password :" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="74,63,0,0" Height="30" Width="55" FontFamily="B Nazanin" FontSize="15" Grid.Column="1"/>
<Label x:Name="lblwrong" Content="" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,150,0,0" ClipToBounds="True" Grid.Column="1" Height="26" Width="275"/>
<Button x:Name="btnLogin" Content="Login" HorizontalAlignment="Left" VerticalAlignment="Top" Width="60" Grid.Column="1" Margin="211,103,0,0" Height="37" Background="White" Click="btnLogin_Click" BorderBrush="Red" FontFamily="B Nazanin" FontSize="15"/>
<Image HorizontalAlignment="Left" Height="117" Margin="4,23,0,0" VerticalAlignment="Top" Width="178" Source="img/Ticket_5523675581838074942.png" Grid.ColumnSpan="2" RenderTransformOrigin="0.5,0.128"/>
<Button x:Name="btnExit" Content="Exit" HorizontalAlignment="Left" VerticalAlignment="Top" Width="60" Grid.Column="1" Margin="146,103,0,0" Height="37" Background="#FFFDFDFD" BorderBrush="Red" Click="Button_btnExit" FontFamily="B Nazanin" FontSize="15"/>
<TextBox x:Name="txtUsername" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="125" Grid.Column="1" Margin="146,34,0,0" BorderBrush="#FFF7311E"/>
<PasswordBox x:Name="txtPassword" Grid.Column="1" HorizontalAlignment="Left" Margin="146,70,0,0" VerticalAlignment="Top" Width="125" Height="23" BorderBrush="#FFFD3306"/>
</Grid>
</Window>
Any Reference/hint or Tutorial/link would be lovely. thank you in advance
You have to set Margin / Padding instead of explicit Width / Height if you want your controls to grow / shrink.
Few links to help you :
Layout with Absolute and Dynamic Positioning
How to make all controls resize accordingly proportionally when window is maximized?
Controls do not resize if you set their Width and Height properties explicitly. Try the following, I removed the Width and Height properties and changed the HorizontalAlignment and VerticalAlignment values to Stretch.
<Window x:Class="WPF_Working_Experimenet.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="216.586" Width="459.256">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="156*"/>
<ColumnDefinition Width="295*"/>
</Grid.ColumnDefinitions>
<Label Content="username :"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
FontFamily="B Nazanin"
FontSize="15"
Grid.Column="1"/>
<Label Content="password :"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
FontFamily="B Nazanin"
FontSize="15"
rid.Column="1"/>
<Label x:Name="lblwrong"
Content=""
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ClipToBounds="True"
Grid.Column="1"/>
<Button x:Name="btnLogin"
Content="Login"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Column="1"
Background="White"
Click="btnLogin_Click"
BorderBrush="Red"
FontFamily="B Nazanin"
FontSize="15"/>
<Image HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Source="img/Ticket_5523675581838074942.png"
Grid.ColumnSpan="2"
RenderTransformOrigin="0.5,0.128"/>
<Button x:Name="btnExit"
Content="Exit"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Column="1"
Background="#FFFDFDFD"
BorderBrush="Red"
Click="Button_btnExit"
FontFamily="B Nazanin"
FontSize="15"/>
<TextBox x:Name="txtUsername"
HorizontalAlignment="Stretch"
TextWrapping="Wrap"
VerticalAlignment="Stretch"
Grid.Column="1"
BorderBrush="#FFF7311E"/>
<PasswordBox x:Name="txtPassword"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderBrush="#FFFD3306"/>
</Grid>
</Window>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="View/Images/LoginImg.jpg" Stretch="Fill" Grid.Column="0" Grid.ColumnSpan="3">
<Image.Effect>
<BlurEffect Radius="8"/>
</Image.Effect>
</Image>
<TextBox Grid.Column="0" Grid.ColumnSpan="3" BorderBrush="Transparent" BorderThickness="0" Background="Transparent" Foreground="White" HorizontalAlignment="Center"
Height="78" Margin="122,10,45.6,0" TextWrapping="Wrap" Text="Library Management System " VerticalAlignment="Top" Width="594" FontSize="40" FontWeight="Bold" FontStyle="Normal">
<TextBox.VerticalContentAlignment>Center</TextBox.VerticalContentAlignment>
<TextBox.IsReadOnly>True</TextBox.IsReadOnly>
</TextBox>
<Canvas Grid.Column="1" HorizontalAlignment="Stretch" Width="auto" Height="300" VerticalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" Background="White">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="0.627"/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<Label Content="Login" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" Background="BurlyWood" FontSize="15" Height="52" Width="254">
<Label.FontWeight>Bold</Label.FontWeight>
</Label>
<TextBox Height="24" Canvas.Left="20" TextWrapping="Wrap" Text="User Name" TextAlignment="Center" Canvas.Top="84" Width="120" Foreground="Gray"/>
<PasswordBox Canvas.Left="20" Canvas.Top="136" Height="34" Width="120"/>
</Canvas>
</Grid>
Setting the horizontal and vertical alignment to stretch instead of setting width and height of the widget will do the trick. But still you can set a margin if you want. Tried this out and it ensured that when the window size is changed the widget will adjust respectively.
I have to display few strings under a bitmap . At a time maximum number of strings that can displayed are 5 and not always all the 5 strings will be displayed. Also the length of the strings vary. Whatever be the case, I want to display these strings in a visually appealing manner under the bitmap. Like, if just one string, I want to position it centrally under the bitmap. If 2 strings, I want to space the strings nicely and center it under the bitmap and so.
I know only at run time the strings to display, number of strings ( min 1 and max 5) to display and also length of string.
I wrote the below XAML code, but I am unable to position the strings nicely for all my conditions. Bitmap1 is a circle, bitmap2 is left arrow and bitmap3 is right arrow.
Can someone help me here?
<Grid x:Name="Graphics" Grid.Column="1" Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="0.319*"/>
<RowDefinition Height="0.56*"/>
<RowDefinition Height="0.321*"/>
</Grid.RowDefinitions>
<Image Height="72" Source="/DataBinding;component/Bitmap1.bmp" Stretch="Fill" Width="108" Grid.Row="1" />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.408*"/>
<ColumnDefinition Width="0.15*"/>
<ColumnDefinition Width="0.408*"/>
</Grid.ColumnDefinitions>
<Image x:Name="Next" Height="48" Width="48" Grid.Column="2" Source="/DataBinding;component/Bitmap3.bmp" HorizontalAlignment="Left" />
<Image x:Name="Prev" Width="48" Height="48" Grid.Column="0" Source="/DataBinding;component/Bitmap2.bmp" HorizontalAlignment="Right"/>
<Grid HorizontalAlignment="Center" ShowGridLines="True" Width="Auto" Grid.ColumnSpan="3" Margin="38,69,41,-40">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Visibility="Visible" Text="String1" Padding="10" Grid.Column="0" FontSize="14.667" TextAlignment="Center" Foreground="White" />
<TextBlock Visibility="Visible" Text="String2" Padding="10" Grid.Column="1" FontSize="14.667" TextAlignment="Center" Foreground="White" />
<TextBlock Visibility="Visible" Text="String3" Padding="10" Grid.Column="2" FontSize="14.667" TextAlignment="Center" Foreground="White" />
<TextBlock Visibility="Visible" Text="String4" Padding="10" Grid.Column="3" FontSize="14.667" TextAlignment="Center" Foreground="White" />
<TextBlock Visibility="Visible" Text="String5" Padding="10" Grid.Column="4" FontSize="14.667" TextAlignment="Center" Foreground="White" />
</Grid>
</Grid>
</Grid>
What you want to do is create a custom panel by creating a custom control based on panel. Override ArrangeOverride and then place things exactly where you want them as if you have a canvas to work with, because your panel is like a canvas when you override ArrangeOverride. Grids are a custom panel themselves :-)
<StackPanel Name="stack1" Orientation="Horizontal" Width="Auto" Background="Red" >
<TextBlock FontSize="14.667" Width="Auto" TextAlignment="Center">
<Run x:Name="String1" Text="String1" />
<Run x:Name="String2" Text="String2" />
<Run x:Name="String3" Text="String3" />
<Run x:Name="String4" Text="String4" />
<Run x:Name="String5" Text="String5" />
</TextBlock>
</StackPanel>
</Grid>
</Grid>
i have added two buttons in stackpanel and set alignment as shown in the code
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<Button Content="Button" Height="64" Name="button1" Width="160" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Button Content="Button" Height="64" Name="button2" Width="160" HorizontalAlignment="Right" VerticalAlignment="Top"/>
</StackPanel>
but this doesn't match with my requirement. I want it to be like shown in image below.
So how can i do this?
Something like this:
<Grid
Width="480">
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*" />
<ColumnDefinition
Width="*" />
</Grid.ColumnDefinitions>
<Button
Width="200"
Content="Clear" />
<Button
Grid.Column="1"
Width="200"
Content="Options"
HorizontalAlignment="Right"
/>
</Grid>
UPDATE: Due to popular demand, here is a grid without the fixed width or the columns.
<Grid>
<Button
Width="150"
Content="Clear"
HorizontalAlignment="Left"
/>
<Button
Width="150"
Content="Options"
HorizontalAlignment="Right"
/>
</Grid>
I am trying to get a layout where an icon floats on the right end of a textblock; the textblock grows/shrinks to content. I cannot make this happen without the textblock running outside the grid. For example:
<Grid x:Name="LayoutRoot" Width="500" HorizontalAlignment="Left" ShowGridLines="True" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="textBlock" VerticalAlignment="Top" Height="25" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Grid.Column="0" >
<TextBlock.Text>longer keeps going and going testgrand you going and then t
</TextBlock.Text>
</TextBlock>
<Rectangle Fill="#FFDE3030" Stroke="Black" VerticalAlignment="Top" Height="41" Width="41" Grid.Column="1"/>
</Grid>
Seems like the natural approach and works fine when the text is shorter than the column/grid, except the textbox and column will grow indefinitely and not honor the bounds of the grid.
The inverse, with the icon on the left, works fine with a simpler layout, and the textblock doesn’t grow indefinitely. This is achieved with this markup:
<Grid Grid.Row="1" Width="500" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Fill="#FFDE3030" Stroke="Black" VerticalAlignment="Top" Height="41" Width="41" Grid.Column="0"/>
<TextBlock x:Name="textBlock2" VerticalAlignment="Top" Height="25" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Grid.Column="1" HorizontalAlignment="Left">
<TextBlock.Text>longer testgrow the textblock and it will just keep growing but it will stop when it gets too </TextBlock.Text>
</TextBlock>
</Grid>
Any help appreciated. If a grid won’t work, is there an alternate layout where I can get the icon floating on the right of the text, and the textblock will trim text when it’s too long?
Also:
No, using * size columns doesn't work because the columns are fixed, and the icon won't float at the end of the text
A DockPanel doesn't work either, or at least I or others I've asked haven't been able to. The best it can do is to have the icon half-cut-off outside the dockpanel's right side.
Can you get what you want by setting MaxWidth on the TextBlock? If you add MaxWidth="460" to your first example:
<Grid x:Name="LayoutRoot" Width="500" HorizontalAlignment="Left" ShowGridLines="True" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<TextBlock MaxWidth="460" x:Name="textBlock" VerticalAlignment="Top" Height="25" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Grid.Column="0" >
<TextBlock.Text>longer keeps going and going testgrand you going and then t</TextBlock.Text>
</TextBlock>
<Rectangle Fill="#FFDE3030" Stroke="Black" VerticalAlignment="Top" Height="41" Width="41" Grid.Column="1"/>
</Grid>
Then the TextBlock will grow horizontally and always have the rectangle immediately on its right. It won't be wider than 460, so the TextBlock plus the Rectangle shouldn't be wider than 500. If you need the Grid to resize dynamically then you can bind TextBlock.MaxWidth to Grid.ActualWidth with a converter that subtracts the width of the Rectangle.
Edit:
Actually, it should be even simpler than that. Use star sizing on the columns, but set MaxWidth instead of Width on the Grid. That way, the grid itself will get smaller when the text is smaller so that the rectangle is always at the edge of the text.
<Grid x:Name="LayoutRoot" MaxWidth="500" HorizontalAlignment="Left" ShowGridLines="True" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="textBlock" VerticalAlignment="Top" Height="25" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Grid.Column="0" >
<TextBlock.Text>longer keeps going and going testgrand you going and then t</TextBlock.Text>
</TextBlock>
<Rectangle Fill="#FFDE3030" Stroke="Black" VerticalAlignment="Top" Height="41" Width="41" Grid.Column="1"/>
</Grid>
Someone internally suggested this answer, which works:
<WrapPanel HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="10" />
</Grid.ColumnDefinitions>
<AccessText TextTrimming="CharacterEllipsis" Grid.Column="0" Margin="0,0,4,0" Text="type more typingon the long hi longer than what if you keep tyingin and get to the end and that's why it changed because you were in the middle" />
<Border Grid.Column="1" Width="10" Height="10" Background="Red" />
</Grid>
</WrapPanel>
The wrappanel seems to provide the necessary magic. I haven't tried Quartermeister's but will save it for future reference!
Our final layout is more complicated and looks like this (it's the header bar for an expander):
<WrapPanel Orientation="Vertical">
<Grid x:Name="HeaderSite" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="19" />
<ColumnDefinition Width="16" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
<ColumnDefinition Width="Auto" /> <!-- 7/14: fix from list: wrap the whole thing in a wrappanel. Allows for one * col. -->
<ColumnDefinition Width="19" />
</Grid.ColumnDefinitions>
<ToggleButton x:Name="buttonExpanderToggleButton"
Height="20" VerticalAlignment="Top"
/>
<Image x:Name="imageActivityIcon" Grid.Column="1"
Height="16" Width="16"
HorizontalAlignment="Left" VerticalAlignment="Top"
Margin="0"/>
<AccessText x:Name="textActivityID"
Grid.Column="2"
VerticalAlignment="Top" Margin="5,2,0,0"
TextTrimming="CharacterEllipsis"
FontSize="12" HorizontalAlignment="Left" Text="MA77777"/>
<AccessText x:Name="textActivityHeader"
Grid.Column="3"
VerticalAlignment="Top" Margin="0,2,0,0"
TextTrimming="CharacterEllipsis"
FontSize="12" HorizontalAlignment="Left" Text="Title title title title aand Title title title title a little and if you type more what happens as you keep typing "/>
<AccessText x:Name="textActivityStatus"
FontWeight="Normal"
FontStyle="Italic"
Grid.Column="4"
TextTrimming="CharacterEllipsis"
VerticalAlignment="Top" Margin="0,2,8,0"
FontSize="12" HorizontalAlignment="Left" Text="(On Hold)"/>
<Image x:Name="imageLink"
Stretch="None" VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Column="5"/>
</Grid>
</WrapPanel>
This works fine too even with the other auto sized columns. The key seems to be the wrappanel and the one * sized column. If you set them all to auto it doesn't work.
I hope this and Quartermeister's answer helps somebody, because this drove me #$%#$% crazy.
The below code will result in the following output, is that what you are looking for???
longer keeps going and going... [red rectangle]
<Grid Width="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="longer keeps going and going testgrand you going and then t" TextTrimming="CharacterEllipsis"/>
<Rectangle Grid.Column="1" Fill="#FFDE3030" Stroke="Black" VerticalAlignment="Top" Height="41" Width="41" />
</Grid>
I had a somewhat similar problem; I wanted to show some content with an externally-sized border area but containing two TextBlocks, where the first is auto-sized and the second is fixed-sized, and the second floats left as the first gets smaller but stops at the right edge (so the first block's text is clipped instead of the second becoming invisible).
Distilling the previous answers, it appears that the key bit of magic is simply to use HorizontalAlignment="Left" with the first column set to star-sized.
<Border BorderThickness="1" BorderBrush="Black">
<Grid HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Value}" />
<TextBlock Grid.Column="1" Text="⏫" Margin="4,0,0,0" Foreground="Blue" />
</Grid>
</Border>
It appears that the way this works is that (a bit counter-intuitively) the Border stays full width (as set by its parent layout), while the Grid will size to its content -- except that it will not get wider than the containing Border. This keeps the second TextBlock visible.