I have two textblocks and they are after each other on the page - name & surname. I am binding data to this so the size depends of the length of them. What's the best way to do them working with variable size?
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding FirstName}" Margin="0,0,5,0" />
<TextBlock Text="{Binding LastName}" />
</StackPanel>
Related
we have a ComboBox and a Button next to eachother. They are in the same Grid.Rowin two different Grid.Columns.
However they both appeared to have a different size. Even by setting VerticalAlignment="Stretch" this did not change.
Last but not least I set an fixed height to both elements but they are still not the same size.
How dows that come and how can I change it?
Here is an image of the problem
This works on my sample app.
<Grid RowDefinitions="Auto,Auto">
<TextBlock Text="Test" Grid.Row="0" />
<Grid
Grid.Row="1"
ColumnDefinitions="Auto,Auto"
RowDefinitions="Auto,Auto">
<ComboBox
Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Stretch"
CornerRadius="0"
SelectedIndex="0">
<TextBlock Text="Auswahlen" />
</ComboBox>
<Button
Grid.Row="1"
Grid.Column="1"
VerticalAlignment="Stretch"
CornerRadius="0">
<FontIcon
FontFamily="Segoe MDL2 Assets"
Glyph="" />
</Button>
</Grid>
</Grid>
I have a GridView that's bound to a Dictionary:
<GridView x:Uid="SearchInputRecentSearches"
x:Name="SearchInputRecentSearches"
ItemsSource="{Binding RecentSearches}"
Grid.Row="1"
Grid.Column="1"
Style="{StaticResource RecentSearchGrid}">
Inside of this GridView, in the ItemTemplate, I want to show the Key or Value:
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Style="{StaticResource RecentSearchesItemStackPanel}">
<TextBlock Text="{Binding Key}"/>
<Button Width="31"
Height="31"
Command="{Binding DataContext.ExecuteDeleteSearch, ElementName=SearchInputRecentSearches}"
CommandParameter="{Binding Key}"
Template="{StaticResource DeleteButton}"/>
<TextBlock Style="{StaticResource RecentSearchStyle}"
Text="{Binding Value}" />
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
However, nothing displays for either Key or Value when I run this. I've tried referring to Path=Key and Path=Value inside of the binding, but this doesn't work, either. I'm currently using a ValueConverter to get the key or value out, but this seems a little unnecessary and I was hoping someone could point out what I was doing wrong!
I'm trying to create a ListViewItemTemplate and my template needs to have two textblocks side by side. The one on the left is a message textblock and should stay left and the one on the right is a date textblock. That textblock needs to stretch to the end of the ItemTemplate and needs to fit all the text. I'm trying to achieve this:
But this is what I get:
The XAML code for this is:
<DataTemplate x:Key="ItemTemplate">
<Grid Height="84">
<StackPanel Holding="ListViewItem_Holding">
<TextBlock Text="{Binding Title}" FontFamily="Segoe WP" FontSize="21" />
<StackPanel Margin="0,0,-3,0" Orientation="Horizontal">
<TextBlock Text="{Binding Post}" FontFamily="Segoe WP SemiLight" FontSize="18" Margin="0,0,-1,0" Height="26" />
<TextBlock Text="{Binding Modified}" FontFamily="Segoe WP SemiLight" FontSize="18" Margin="0,0,-3,0" SelectionChanged="TextBlock_SelectionChanged" />
</StackPanel>
<TextBlock Text="{Binding ID}" FontFamily="Segoe WP SemiLight" FontSize="18" Visibility="Collapsed" />
</StackPanel>
</Grid>
</DataTemplate>
How can I fix this? I need it so that it stretches properly and at the same time fits all the text regardless of the orientation.
I would personally use a Grid as it is far more flexible than StackPanel and deals with different screen sizes much better. something like below
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="Cant send: message" FontFamily="Segoe WP SemiLight"
FontSize="18" Margin="0,0,-1,0"
TextWrapping="Wrap"/>
<TextBlock Text="1:14a" Grid.Column="1" FontFamily="Segoe WP SemiLight"
TextWrapping="Wrap" FontSize="18"
HorizontalAlignment="Right"
SelectionChanged="TextBlock_SelectionChanged"
Margin="0,-15,0,0"/>
</Grid>
Note 2 columns are defined with equal widths. You can adjust this to your needs.
Also both TextBlocks have
TextWrapping="Wrap"
which means your text will go to available space (column width) then wrap to the next line if space is available.
The second TextBlock is aligned to the right so adjust margins as appropriate.
HorizontalAlignment="Right"
You can make this with Grid.RowDefinitions and Grid.ColumnDefinitions.
Base on your picture you have data on two columns and one line.
So you can size your screen on two columns and one line. You don't need to use stackpanel to achieve this.
<Grid Height="84">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="User" TextWrapping="Wrap" FontFamily="Segoe WP" FontSize="21" Grid.Column="0"/>
<TextBlock Text="1:41a" FontFamily="Segoe WP SemiLight" FontSize="18" Grid.Column="1" HorizontalAlignment="Right"/>
</Grid>
I have a handful of TextBlock's on my MainPage.xaml which have a subtle amount of distance between each other to look uniform. The last textbox however is larger and allows the text to be wrapped. The problem which I am facing is when I populate the textbox with a lot of content and all of the textblock's seem to stick to one another.
Image to explain:
The left image is fine, but as you can see on the right image, when I fill the box completely then all the textblock's magically stick together somehow.
Markup:
<ScrollViewer x:Name="LayoutRoot" Background="Transparent">
<Grid>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,635">
<TextBlock Text="Project" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Text="Project" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<Grid x:Name="ContentPanel" Margin="12,161,12,0">
<toolkit:ListPicker x:Name="myObj" ItemsSource="{Binding myobj, ElementName=this, Mode=OneTime}" Margin="12,12,12,537" >
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name, Mode=OneTime}" FontSize="{StaticResource PhoneFontSizeSmall}"/>
<TextBlock Text="{Binding Id, Mode=OneTime}" FontSize="{StaticResource PhoneFontSizeSmall}" Visibility="Collapsed"/>
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name, Mode=OneTime}" Padding="5" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Text="{Binding Id, Mode=OneTime}" FontSize="{StaticResource PhoneFontSizeSmall}" Visibility="Collapsed"/>
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
<toolkit:PhoneTextBox Height="auto" Name="txtName" Margin="0,70,0,456" Hint="Name" Text="{Binding Name, Mode=TwoWay}" LostFocus="TxtName_OnLostFocus"/>
<toolkit:PhoneTextBox Height="auto" Name="txtAddress" Margin="0,138,0,388" Hint="First Line of Address" Text="{Binding Address, Mode=TwoWay}" LostFocus="TxtAddress_OnLostFocus"/>
<toolkit:PhoneTextBox Height="auto" Name="txtEmail" Margin="0,206,0,320" Hint="Email Address" Text="{Binding Email, Mode=TwoWay}" LostFocus="TxtEmail_OnLostFocus"/>
<toolkit:PhoneTextBox Height="auto" Name="txtTelephone" Margin="0,274,0,252" Hint="Telephone" Text="{Binding Telephone, Mode=TwoWay}" LostFocus="TxtTelephone_OnLostFocus"/>
<toolkit:PhoneTextBox Height="auto" Name="txtComments" Margin="0,340,0,71" Hint="Comments" TextWrapping="Wrap"/>
</Grid>
</Grid>
</ScrollViewer>
Anyone see the obvious problem?
I think problem is with your margin. And the XAML is not efficient also.
Why dont you just add Rows to your Grid and place each TextBox into its own row - that will help you not to HARDCODE margins which lead to messing up the result...
Or the other way is to place everuthing into a Vertical Stack Panel
I fixed the issue by replacing Height="auto" to Height="80" on the TextBlocks.
I'm trying to give some images (of different sizes) the same dimensions. All my images should be 90x258 (w*h), but somehow I can't get this working.
This is my code:
<StackPanel Orientation="Horizontal">
<Border BorderThickness="4,0,0,0" BorderBrush="BlanchedAlmond">
<Image x:Name="Image" Source="{Binding Image}" Width="90" Height="258" />
</Border>
<StackPanel Orientation="Vertical" Width="164">
<TextBlock TextWrapping="Wrap" Style="{StaticResource ItemTextStyle}" Text="{Binding Title}" Margin="10,0"/>
<TextBlock TextWrapping="Wrap" Style="{StaticResource CaptionTextStyle}" Text="{Binding Authors}" Margin="10"/>
</StackPanel>
</StackPanel>
I played around with the Stretch property of my image but no matter what I select, the image will not be 90x258.
When using the default Uniform stretch it maintains the aspect ratio (I don't want that), when I choose None the image is shown in its original dimensions and UniformToFill and Fill will make the image so large that only a small part of it is actually shown in the image container.
Here's an example:
I want it to show the full cover of the book, in 90x258:
Can anyone help me please?
Try settings the height to auto and the stretch to Fill
<StackPanel Orientation="Horizontal">
<Border BorderThickness="4,0,0,0" BorderBrush="DodgerBlue">
<Image x:Name="Image" Source="{Binding Image}" HorizontalAlignment="Left" Width="94" Stretch="Fill" />
</Border>
<StackPanel Orientation="Vertical" Width="164">
<TextBlock TextWrapping="Wrap" Style="{StaticResource ItemTextStyle}" Text="{Binding Title}" Margin="10,0"/>
<TextBlock TextWrapping="Wrap" Style="{StaticResource CaptionTextStyle}" Text="{Binding Authors}" Margin="10"/>
</StackPanel>
</StackPanel>