My Windows Phone app, have a ListBox, with some binding values.
The TextBlock Binding unidade overlies the TextBlock Binding quantidade when have more of 3 characters.
How do for that the position (margin), changes when the numbers increase.
<controls:PivotItem Header="Consulta" Name="consultaCartao">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ListBox Name="List2" ItemsSource="{Binding produtosCartao}" HorizontalContentAlignment="Stretch" Grid.ColumnSpan="3" Margin="0,182,-66,0" Visibility="Collapsed">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="Auto">
<StackPanel.Background>
<SolidColorBrush Color="#FFE8FF00" Opacity="0.2"/>
</StackPanel.Background>
<TextBlock Grid.Column="0" Text="{Binding descricao}" TextWrapping="Wrap" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Grid.Column="3" Text="{Binding quantidade}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}" Margin="20,5,12,0"/>
<TextBlock Grid.Column="3" Text="{Binding valor_preco_a, ConverterCulture=pt-BR, StringFormat=C2}" TextWrapping="Wrap" Style="{StaticResource PhoneTextNormalStyle}" Margin="300,-30,12,0"/>
<TextBlock Grid.Column="3" Text="{Binding unidade}" TextWrapping="Wrap" Style="{StaticResource PhoneTextNormalStyle}" Margin="43,-27,12,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I would use inline Run elements:
<TextBlock Grid.Column="3" TextWrapping="Wrap" Style="{StaticResource PhoneTextNormalStyle}" Margin="43,-27,12,0">
<Run Text="{Binding unidade}" />
<Run Text="{Binding quantidade}" />
</TextBlock>
That way the "KG" will always follow on from the number.
Related
I am using uwp community toolkits expander and I am having problems bindings multiple values to the header text. Is this even possible ?
<ListView x:Name="LV" ItemsSource="{Binding VaccSingelton.VaccOverblikListe}" ScrollViewer.VerticalScrollBarVisibility="Visible" SelectionChanged="LV_SelectionChanged" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<controls:Expander x:Name="Expander1" Margin="0,0,0,10"
Header="{Binding Name}" IsExpanded="false" >
<Grid Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock FontWeight="Bold" Text="Antal Stik:" Grid.Column="0"></TextBlock>
<TextBlock Text="{Binding Stik}" Grid.Column="1" Margin="10,0,0,0">
</TextBlock>
<TextBlock FontWeight="Bold" Text="Udføres på:" Grid.Column="0" Grid.Row="1"></TextBlock>
<TextBlock Text="{Binding Udførsel}" Grid.Column="1" Grid.Row="1" Margin="10,0,0,0"></TextBlock>
<TextBlock FontWeight="Bold" Text="Bivirkninger:" Grid.Column="0" Grid.Row="2"></TextBlock>
<TextBlock Text="{Binding Bivirkninger}" Grid.Column="1" Grid.Row="2" Margin="10,0,0,0"></TextBlock>
<TextBlock FontWeight="Bold" Text="Information:" Grid.Column="0" Grid.Row="3"></TextBlock>
<TextBlock Text="{Binding Info}" Grid.Column="1" Grid.Row="3" Margin="10,0,0,0"></TextBlock>
<TextBlock FontWeight="Bold" Text="Dato:" Grid.Column="0" Grid.Row="4"></TextBlock>
<TextBlock x:Name="test" Grid.Column="1" Grid.Row="4" Margin="10,0,0,0">
<Run Text="{Binding OpretVaccDatoText}"></Run>
</TextBlock>
</Grid>
</controls:Expander>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Just to make it more clear, I want to add more bindings to the header inside of:
<controls:Expander x:Name="Expander1" Margin="0,0,0,10"
Header="{Binding Name}" IsExpanded="false" >
So should possibly look like this:
<controls:Expander x:Name="Expander1" Margin="0,0,0,10"
Header="{Binding Name, address, Email}" IsExpanded="false" >
Ideally, I'd recommend just having a property in your viewmodel with what you want to show (I assume the three properties concatenated), but you can also use compiled bindings (x:Bind) for that as it supports functions.
It does, however, require that your app's minimum target SDK version is 14393 or later!
I have a listbox which is filled up with items taken from a data contract. I want to add a bit of xaml to the top of the listbox which takes data from another data contract. How do i go about doing this?
<phone:PivotItem>
<ScrollViewer>
<StackPanel>
<ListBox x:Name="StatusCommentsList"
Background="Transparent"
ItemsSource="{Binding StatusComments}"
u:ScrollViewerMonitor.AtEndCommand="{Binding FetchMoreStatusCommentsDataCommand}" VerticalContentAlignment="Top">
<!-- THIS DOESNT WORK-->
<ListBoxItem>
<Grid Height="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="389"/>
</Grid.ColumnDefinitions>
<StackPanel Height="auto" Grid.Column="0" Background="Transparent">
<Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding Notification.context.data.created_by.image.thumbnail_link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Height="auto" Grid.Column="1" Width="389" MaxWidth="389" Orientation="Vertical" >
<TextBlock TextWrapping="Wrap" Text="{Binding Notification.context.data.created_by.name}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
<TextBlock TextWrapping="Wrap" Text="{Binding Notification.context.data.created_on}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
<TextBlock TextWrapping="Wrap" Text="{Binding Notification.context.data.rich_value}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
</StackPanel>
</Grid>
</ListBoxItem>
<!-- /THIS DOESNT WORK -->
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
<Button Style="{StaticResource JamesTransparentButton}" Padding="-5,0,-5,-5" Margin="-7,-12,-7,-7" Height="auto" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
<Grid Height="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="389"/>
</Grid.ColumnDefinitions>
<StackPanel Height="auto" Grid.Column="0" Background="Transparent">
<Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding created_by.image.thumbnail_link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Height="auto" Grid.Column="1" Width="389" MaxWidth="389" Orientation="Vertical" >
<TextBlock Text="{Binding created_by.name}" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" />
<TextBlock Text="{Binding created_on}" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" />
<TextBlock TextWrapping="Wrap" Text="{Binding value}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
</StackPanel>
</Grid>
</Button>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
</phone:PivotItem>
I tried just adding a new item to the listbox but the data contract would mean i have to instantiate all the sub levels of objects and it would suckkk as they are different domains.
Keep in mind that i want the entire screen to scroll in union... so that it looks like one big long list, regardless of the first being like a default value.
Put the first item outside the ListBox and disable ScrollViewer for the ListBox so the whole thing will scroll together. Here's an example where the item is a simple TextBlock. You can change it to suit your requirement.
<ScrollViewer>
<StackPanel Orientation="Vertical">
<TextBlock Text="Item 1"/>
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding item}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
Having some problems with a slider in my standardstyles.xaml.
How can I add an event on the slider that I can use on the pages where the datatemplate is implemented?
<DataTemplate x:Key="DimmerItemTemplate">
<Grid HorizontalAlignment="Left" Width="225" Height="70" Background="#FFECECEC">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="175"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="38"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="2">
<Image x:Name="imgLow" Stretch="UniformToFill" Source="ms-appx:///Assets/HubPage/TileLowIcon.png" Visibility="{Binding Low}"/>
<Image x:Name="imgHigh" Stretch="UniformToFill" Source="ms-appx:///Assets/HubPage/TileHighIcon.png" Visibility="{Binding High}"/>
</Grid>
<StackPanel Margin="10,0,0,15" VerticalAlignment="Bottom">
<TextBlock Text="{Binding Title}" Foreground="#FF999999" Style="{StaticResource TitleTextStyle}" Margin="0,0,0,5" FontSize="13.333" VerticalAlignment="Top" LineHeight="13.333"/>
<Slider Height="30" Width="160" Name="DimmerSlider" ValueChanged="slider2_ValueChanged">
</Slider>
</StackPanel>
<StackPanel VerticalAlignment="Bottom" Margin="0,0,0,15" Grid.Column="1">
<TextBlock TextWrapping="Wrap" Text="{Binding Level1}" FontFamily="Segoe UI" Foreground="Black" FontSize="13.333" FontWeight="SemiBold" Margin="0"/>
<TextBlock TextWrapping="Wrap" Text="{Binding Level2}" FontFamily="Segoe UI" Foreground="Black" FontSize="13.333" FontWeight="SemiBold" Margin="0"/>
</StackPanel>
</Grid>
</DataTemplate>
I'm trying to split a button in half so that I can show text data in each half - which can also be increased in size when the application is expanded.
This is the code I've got soo far.
<Button Margin="16,0,16,6" Background="#daf0fc" BorderThickness="0" Height="Auto" HorizontalAlignment="Stretch" BorderBrush="White" Click="edit_house" Padding="0" Focusable="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Left" Background="Black">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="0,0,5,0" Text="{Binding house_number}" FontWeight="Bold" FontSize="14" />
<TextBlock Margin="0,0,0,0" Text="{Binding street}" FontWeight="Bold" FontSize="14" />
</StackPanel>
<TextBlock Text="{Binding postcode}" />
<TextBlock Margin="0,6,0,0" Text="{Binding house_type_text}" />
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,2,0,0">
<TextBlock Text="£" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
<TextBlock Text="{Binding house_price}" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,0,0,0">
<TextBlock Margin="0,0,0,0" Text="{Binding sold_text}" HorizontalAlignment="Right" Foreground="#FF107910" FontWeight="ExtraBold" FontSize="14" />
</StackPanel>
</StackPanel>
I've tried setting each StackPanel half to stretch, but they both just Float in the centre of the button, so I can't align the text on either half.
Here's a graphical representation of the button I'm trying to create...
Update:
Here is what I'm getting with the code above, sadly I'm struggling to get the text to align, or to get anything to stretch to the full width of each half:
StackPanel won't do that; it just stacks elements.
Instead, use a <Grid> with two columns.
StackPanel is not the right container for this. Try using a Grid like this:
<Button>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
...
</StackPanel>
<StackPanel Grid.Colunn="1">
...
</StackPanel>
</Grid>
</Button>
I like to use UniformGrids, although a Grid will also work if you need to define your Rows/Columns individually
Here's an example, with correct alignments:
<UniformGrid Columns="2">
<StackPanel Background="LightBlue" >
<StackPanel Orientation="Horizontal">
<TextBlock Margin="0,0,5,0" Text="123" FontWeight="Bold" FontSize="14" />
<TextBlock Margin="0,0,0,0" Text="Main Street" FontWeight="Bold" FontSize="14" />
</StackPanel>
<TextBlock Text="12345" />
<TextBlock Margin="0,6,0,0" Text="Type" />
</StackPanel>
<StackPanel Background="Yellow">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0,2,0,0" HorizontalAlignment="Right">
<TextBlock Text="£" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
<TextBlock Text="100.00" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
</StackPanel>
<TextBlock Margin="0,0,0,0" Text="200.00" HorizontalAlignment="Right" Foreground="#FF107910" FontWeight="ExtraBold" FontSize="14" />
</StackPanel>
</UniformGrid>
You might also be interested in checking out this link, which gives you a quick visual look at each of WPF's different layouts and how they act.
I have difficulty accessing a grid or its rows(within a ListBox), despite defining the grid's or row's name. I intend to set a new MaxHeight to one of its rows when some parameter is passed in from a SharePoint browsable property to the Silverlight control.
How may i achieve the desired effect? Binding perhaps?
# Page.xaml:
<ListBox ItemsSource="{Binding}" DataContext="" x:Name="NewsList" SelectionChanged="NewsList_SelectionChanged" SelectionMode="Single" Width="580" Height="360" VerticalAlignment="Top" HorizontalAlignment="Center" >
<ListBox.ItemTemplate>
<DataTemplate >
<Grid Height="110" Width="540" x:Name="StaffNewsBodyHeight">
<Grid Height="110" Width="540">
<Grid.RowDefinitions>
<RowDefinition Height="15" />
<RowDefinition Height="{Binding StaffNewsBodyHeight}" />
<RowDefinition Height="15" />
</Grid.RowDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="82" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border CornerRadius="2" BorderThickness="2" BorderBrush="Gray" Height="82" Width="82" Background="LemonChiffon" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.RowSpan="3" Grid.Column="0" >
<Image Source="{Binding NewsThumbnail}" Style="{StaticResource ThumbNailPreview}" />
</Border>
<TextBlock x:Name="NewsTitle" FontFamily="Arial" FontWeight="bold" TextDecorations="Underline" Text="{Binding Title}" Style="{StaticResource TitleText}" Grid.Row="0" Grid.Column="1"/>
<TextBlock x:Name="NewsBody" FontFamily="Arial" Text="{Binding NewsBody}" Margin="5" Style="{StaticResource DescriptionBlock}" Grid.Row="1" Grid.Column="1" />
<StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1" Margin="3,3,3,3">
<TextBlock Text="Published By:" HorizontalAlignment="Left" VerticalAlignment="Bottom" Foreground="Gray" FontWeight="Bold" FontSize="9" />
<TextBlock Text="{Binding PublishedBy}" HorizontalAlignment="Left" VerticalAlignment="Bottom" Foreground="Gray" FontWeight="Bold" FontSize="9" />
<TextBlock Text="{Binding DatePublished}" HorizontalAlignment="Left" VerticalAlignment="Bottom" Foreground="Gray" FontWeight="Bold" FontSize="9" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
# Page.xaml.cs:
if (!string.IsNullOrEmpty(_setLength))
{
StaffNews test = new StaffNews();
//assign new height to gridrow of NewsBody
if (_setLength.Contains("_3"))
test.StaffNewsBodyHeight.Equals(200);
}
I believe that StaffNews is representing one item in your list, right?
In that case, to assign a value to a property, use:
test.StaffNewsBodyHeight = 200;
to replace the last line of your snippet.
[P.S. - StaffNewsBodyHeight is a dependency property defined in StaffNews, right?]