I have the following XAML in my Windows Phone app:
<StackPanel Orientation="Horizontal">
<Grid x:Name="LayoutRoot">
<Image Source="{Binding ImageUrl}" Height="80" HorizontalAlignment="Left" Margin="10,10,0,0" Stretch="Fill" VerticalAlignment="Top" Width="93" />
<TextBlock name="NameBlock" Text="{Binding Name}" FontSize="30" Margin="150,20,0,0" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Width="300" />
<TextBlock name="DescriptionBlock" Text="{Binding Description}" FontSize="25" Margin="150,150,0,0" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Width="300" />
</Grid>
</StackPanel>
Currently, I have the margin of the second TextBlock (DescriptionBlock) set to a static value. Now because I have the work wrapping of the first TextBlock (NameBlock) set to "Wrap", the height of the TextBlock is variable.
Does anyone know how to make the top-margin of DescriptionBlock equal to the automatic height of NameBlock? This would ensure that the second DescriptionBlock appears directly below the NameBlock, regardless of the length of the text of NameBlock.
Many thanks!
Brett
This is what panels are for. Wrap the two text blocks in stack panel and it will stack the text blocks one above the other.
<Grid x:Name="LayoutRoot">
<Image Source="{Binding ImageUrl}" Height="80" HorizontalAlignment="Left" Margin="10,10,0,0" Stretch="Fill" VerticalAlignment="Top" Width="93" />
<StackPanel Margin="150,20,0,0" Width="300">
<TextBlock name="NameBlock" Text="{Binding Name}" FontSize="30" TextWrapping="Wrap" HorizontalAlignment="Left" />
<TextBlock name="DescriptionBlock" Text="{Binding Description}" FontSize="25" TextWrapping="Wrap" HorizontalAlignment="Left" />
</StackPanel>
</Grid>
A panel that holds a single child is usually useless, so I removed the stack panel around the grid.
If you'd like to continue using Grid you can define rows for it to size automatically.
Related
I am building a wpf application, where my text block text is fading out when the application is run.
Code is
<Grid>
<TextBlock Text="RSP Level" Width="78" Height="Auto" HorizontalAlignment="Left" Margin="54.2,3,0,398.6" Grid.Column="3"/>
<TextBlock Text="Hex" Width="60" Height="Auto" HorizontalAlignment="Left" Grid.Column="3" Margin="157.2,36,0,367.6" RenderTransformOrigin="0.993,0.976" Grid.ColumnSpan="2"/>
<TextBlock Text="Hex" Width="29" Height="20" TextWrapping="Wrap" HorizontalAlignment="Left" Grid.Column="3" Margin="31.2,35,0,368.6" RenderTransformOrigin="1.91,0.08" />
<TextBlock Text="Link" Width="29" Height="20" HorizontalAlignment="Left" Grid.Column="3" Margin="31.2,59,0,344.6" RenderTransformOrigin="0.993,0.976"/>
<TextBlock Text="Application" Width="61" Height="20" HorizontalAlignment="Left" Grid.Column="3" Margin="32.2,83,0,320.6" RenderTransformOrigin="0.993,0.976"/>
<TextBlock Text="Physical" Width="66" Height="Auto" HorizontalAlignment="Left" Grid.Column="3" Margin="158.2,61,0,342.6" RenderTransformOrigin="0.993,0.976" Grid.ColumnSpan="2"/>
<TextBlock Text="Link" Width="35" Height="Auto" HorizontalAlignment="Left" Grid.Column="3" Margin="158.2,85,0,318.6" RenderTransformOrigin="0.993,0.976"/>
<TextBlock Text="Application" Width="69" Height="Auto" HorizontalAlignment="Left" Grid.Column="3" Margin="157.2,108,0,295.6" RenderTransformOrigin="0.993,0.976" Grid.ColumnSpan="2"/>
</Grid>
This is not the right way to align contents. You can use StackPanel to place child elements below or beside each other. If you use Grid, define Rows and Columns. Using margins is not a proper way. Read more WPF about layouts here.
We are working on a school project and has run into a dead end. We are trying to make the grid fill the entire parent window but we are simply not able to do so.
This is what the designer shows and how we want it to look:
And this is how it looks when we run it:
Here is our xaml code:
<Grid x:Name="Grid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ActualWidth, RelativeSource = {RelativeSource Mode=TemplatedParent}}" Height="{Binding ActualHeight, RelativeSource ={RelativeSource Mode=TemplatedParent}}">
<Grid.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="Assets/france_countryside.jpg" Opacity="0.4" />
</Grid.Background>
<!--Search section-->
<RelativePanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ElementName=Grid,Path=ActualWidth}">
<TextBlock Text="Find available apartment" FontSize="24" Margin="30" RelativePanel.AlignHorizontalCenterWithPanel="True" />
<AutoSuggestBox Name="AutoSuggestBox"
PlaceholderText="Search"
Width="300"
RelativePanel.AlignHorizontalCenterWithPanel="True"
Margin="0,100,0,0"
TextChanged="AutoSuggestBox_OnTextChanged"
Header="Destination:"/>
<CalendarDatePicker Name="CheckInPicker" Header="Check in:" RelativePanel.Below="AutoSuggestBox" RelativePanel.AlignLeftWith="AutoSuggestBox" Margin="0,40,0,0" PlaceholderText="select a date" IsTodayHighlighted="False"/>
<CalendarDatePicker Name="CheckOutPicker" Header="Check out:" RelativePanel.Below="AutoSuggestBox" RelativePanel.AlignRightWith="AutoSuggestBox" Margin="0,40,0,0"/>
<ComboBox x:Name="numberOfGuestsBox" Width="127" RelativePanel.Below="CheckInPicker" RelativePanel.AlignLeftWith="AutoSuggestBox" Margin="0,30,0,0" PlaceholderText="Choose" Header="Guests:" FontSize="15">
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<x:String>5</x:String>
<x:String>6</x:String>
<x:String>7</x:String>
<x:String>8</x:String>
<x:String>9</x:String>
<x:String>10</x:String>
</ComboBox>
<ToggleSwitch Header="Smoking allowed?" Margin="0,30,0,0" RelativePanel.Below="CheckOutPicker" RelativePanel.AlignLeftWith="CheckOutPicker" OffContent="Eew - No!" OnContent="Ya man!"/>
<Button x:Name="SearchButton" Content="Search available apartments" RelativePanel.Below="numberOfGuestsBox" RelativePanel.AlignHorizontalCenterWithPanel="True" Margin="0,30,0,30" Width="300" Height="50" Background="MediumSeaGreen" Foreground="AliceBlue" Click="SearchButton_Click"/>
</RelativePanel>
</Grid>
How do we go about this?
We have tried what to us seems everything with stretching. Margin is not really an option as we want it to be able to re-size.
It seems like (to us) that the grid is fitting the relative panel and shrinks to that size. We are somewhat sure that if we get the grid to fit the screen size of the window the relative panel will be placed in the middle. Thanks for your help in advance!
Edit:
We hold the "views" inside a frame that might be causing the problem. When i re-size the frame the image re-sized and the splitview moves to the "middle" but the scaling doesn't work on the splitview nor the picture.
Here is the code for the splitview:
<!--Split View-->
<SplitView Name="MySplitView"
Grid.Row="1"
DisplayMode="CompactOverlay"
OpenPaneLength="200"
CompactPaneLength="48"
HorizontalAlignment="Left">
<!--SplitView Pane for icons-->
<SplitView.Pane>
<ListBox Name="IconsLIstBox" SelectionMode="Single" SelectionChanged="IconsLIstBox_OnSelectionChanged">
<ListBoxItem Name="HomeListItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Home" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="LocationsListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Locations" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="MostPopularListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Most Popular" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="MapListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Map" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="ProfileListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Profile" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="ContactListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Contact" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
</ListBox>
</SplitView.Pane>
<!--SplitView Content-->
<Frame x:Name="MyFrame" HorizontalAlignment="Left" Width="1043"/>
</SplitView>
</Grid>
We've tried with the frame being inside a splitview.content but there is no difference between the two.
You're trying to hard :) Sometimes XAML can be easy.
Container controls like Grid and RelativePanel automatically scale to the full available size of their parent, while others like StackPanel only grow to the minimal size needed for their child elements. Only the latter type needs HorizontalAlignment="Stretch" and VerticalAlignment="Stretch" to fill the screen. Never bind the Width/Height properties.
This should be enough to go full screen (if your grid is directly under a page and not in a StackPanel or similar control):
<Grid x:Name="Grid">
<Grid.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="Assets/france_countryside.jpg" Opacity="0.4" />
</Grid.Background>
<!--Search section-->
<RelativePanel>
...
</RelativePanel>
</Grid>
Edit in reply to added code of the splitview in the question:
I noticed both SplitView and Frame have HorizontAlignment="Left". That's saying: "instead of using my full screen, only use whatever size you minimally need and align to the left". Remove those assignments and the width of your Frame. Prevent using alignments (left/right/center) or sizes (width/height) when you want to fill your parent control.
<!--Split View-->
<SplitView Name="MySplitView"
Grid.Row="1"
DisplayMode="CompactOverlay"
OpenPaneLength="200"
CompactPaneLength="48">
....
<!--SplitView Content-->
<Frame x:Name="MyFrame" />
</SplitView>
I have 2 textblocks on my form. I need to have vertical scrollbars in each of them. Due to some reason, I am not able to get the scrollbars on both. Kindly provide me with some idea.
<Grid>
<Button Content="COMPARE" HorizontalAlignment="Left" Margin="216,30,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
<TextBox x:Name="TextBox1" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Auto" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,69,0,0" TextWrapping="Wrap" RenderTransformOrigin="-1.351,-2.164" Height="242" Width="226" Loaded="TextBox1_Loaded" />
<ScrollViewer>
<TextBlock x:Name="TextBlock1" HorizontalAlignment="Left" Margin="10,69,0,0" TextWrapping="Wrap" VerticalAlignment="Top" RenderTransformOrigin="-1.351,-2.164" Height="242" Width="226" Loaded="TextBlock1_Loaded" />
</ScrollViewer>
<TextBox x:Name="TextBox2" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Auto" HorizontalAlignment="Left" Margin="258,69,0,0" TextWrapping="Wrap" VerticalAlignment="Top" RenderTransformOrigin="-1.351,-2.164" Height="242" Width="226" Loaded="TextBox2_Loaded"/>
<ScrollViewer>
<TextBlock x:Name="TextBlock2" HorizontalAlignment="Left" Margin="258,69,0,0" TextWrapping="Wrap" VerticalAlignment="Top" RenderTransformOrigin="-1.351,-2.164" Height="242" Width="226" Loaded="TextBlock2_Loaded_1"/>
</ScrollViewer>
<Button Content="EDIT" HorizontalAlignment="Left" Margin="409,30,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>
<Button Content="HOME" HorizontalAlignment="Left" Margin="21,26,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.23,0.986" Click="Button_Click_2"/>
</Grid>
Try to check this out:
1. XAML Code:
<ScrollViewer Grid.Column="0" Grid.Row="0">
<TextBlock x:Name="ATextBlock" ></TextBlock></ScrollViewer>
<ScrollViewer Grid.Row="0" Grid.Column="1" >
<TextBlock x:Name="BtTextBlock" ></TextBlock></ScrollViewer>
the problem was; the Height definition on the TextBlock. Just remove it and that is.
regards.,
To show vertical scroll bar on a TextBox when needed you can use this XAML
<TextBox .... VerticalScrollBarVisibility="Auto" />
ScrollBar will apear when text does not fit the original space given to controll.
I have a xaml page with several panorama items and one of the panorama's code is as below
<phone:PanoramaItem Header="onepan">
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<ListBox x:Name="PhoneList" Height="486" Background="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="108" >
<Image Height="100" Margin="5" Stretch="Fill" Width="100" Source="/Assets/ApplicationIcon.png" ></Image>
<Grid x:Name="ContentPanel" Margin="20,28,0,0" Width="265" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="titles" FontSize="30" FontWeight="Bold" TextWrapping="Wrap" LineHeight=" 24" MaxHeight=" 48" LineStackingStrategy="BlockLineHeight" Grid.Row="0" Foreground="Black" FontStyle="Normal" Text="{Binding title}"
Margin="0,0,0,0" Tag="{Binding title}" Tap="navigateto"/>
<TextBlock Grid.Row="2" VerticalAlignment="Top" TextWrapping="Wrap" Margin="123,-3,0,0" Foreground="Black" FontStyle="Normal" Text="{Binding Date}" Height="27" />
<TextBlock HorizontalAlignment="Left" Margin="0,-4,0,3" Grid.Row="2" TextWrapping="Wrap" Text="date :" Width="118" Foreground="Black"/>
<StackPanel x:Name="ivnod" Orientation="Horizontal" HorizontalAlignment="Right" Height="28" Margin="0,21,10,-33" Grid.Row="2" VerticalAlignment="Top" Width="255">
<TextBlock TextWrapping="Wrap" Text="Rating" Width="64" Foreground="Black"/>
//I want to add here a image tag by c# code
</StackPanel>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
</phone:PanoramaItem>
I want to add image tag inside stack panel called 'ivnod' using for loop I can add images directly but I dont know whether I should specify all these elements before specifying stack panel and while using this code it displays error
Image img = new Image();
img.Source = new BitmapImage(new Uri("/Assets/ApplicationIcon.png", UriKind.Relative));
ivnod.Children.Add(img);//-->here ivnod displayed as "not available in current context"
You should take Image control over there and you can pass binding to it as you are giving to TextBlock. you just need to pass Source to Image in Binding. that Would work Perfectly.
<StackPanel x:Name="ivnod" Orientation="Horizontal" HorizontalAlignment="Right" Height="28" Margin="0,21,10,-33" Grid.Row="2" VerticalAlignment="Top" Width="255">
<TextBlock TextWrapping="Wrap" Text="Rating" Width="64" Foreground="Black"/>
<Image Source="{Binding imgSource}"></Image>
</StackPanel>
I have data binding to a listbox, and texttrimming property set to WordEllipsis, but it doesn't seem to work. The textblocks are showing text as if they do without the texttrimming property set. This is my xaml code. Please help.
<Grid>
<Grid.Resources>
<application:ViewModel x:Key="ViewModel"/>
</Grid.Resources>
<TextBlock Height="75" TextWrapping="Wrap" Text="Click on Settings to search for quotes (by author or by query)." VerticalAlignment="Top" TextAlignment="Center" FontSize="26.667"/>
<ListBox Margin="0,166,0,0" Name="lstQuote" DoubleTap="lstQuote_DoubleTap" Hold="lstQuote_Hold">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<es:RegularPolygon Fill="#FFF4F4F5" Height="90" InnerRadius="0.47211" PointCount="5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Width="84"/>
<StackPanel Orientation="Vertical" Margin="0,10,0,0">
<TextBlock Text="{Binding Author}" TextWrapping="Wrap" FontSize="24"/>
<TextBlock Text="{Binding Quote}" TextWrapping="NoWrap" FontSize="30" TextTrimming="WordEllipsis" Width="Auto" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Content="Random Quote" Height="79" Margin="48,83,44,0" VerticalAlignment="Top" x:Name="quotSearch" Click="quotSearch_Click" />
</Grid>
change TextBox Width properties to fixed width
<TextBlock Width="200" Height="75" TextWrapping="Wrap" Text="Click on Settings to search for quotes (by author or by query)." VerticalAlignment="Top" TextAlignment="Center" FontSize="26.667"/>