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!
Related
I am currently developing an application for Windows Embedded Handheld 8.1 and have run into an issue where I have a dynamically expanding grid inside a gridview. My problem is that since this application runs on handheld devices I have a very limited space to use on every row.
What I would like to do is to just show general information on each row and then when a row is tapped or selected in the device, I would like to somehow expand that specific row and show some more detailed information, this seems to be problematic however since as soon as I start messing with a specific rows height, every other row in the ItemTemplate naturally also grows, leaving a lot of blank spaces in the grid.
Normally I would have used a DataGrid and DataGrid.RowDetailsTemplate, but that control does not seem to be implemented in WEH8.1.
So my question is if someone has a solution or possibly a workaround to my problem?
Code Example on GridView Below:
<ScrollViewer Grid.Row="1" Margin="0">
<GridView x:Name="gvCustomerOrderRows">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Background="{Binding BackgroundColor}" Margin="0" Height="{Binding ShowSecondRowHeight}" Tapped="Grid_Tapped" Tag="{Binding kor_row}">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="31.25"/>
<ColumnDefinition Width="58.75"/>
<ColumnDefinition Width="105"/>
<ColumnDefinition Width="65"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="70"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding kor_pos}" Grid.Row="0" Visibility="{Binding VisibilityHideThenText}" Grid.Column="0" FontSize="14" VerticalAlignment="Center" Margin="0,17,0,16"></TextBlock>
<TextBlock Text="{Binding kor_partno}" Grid.Row="0" Visibility="{Binding VisibilityHideThenText}" Grid.Column="1" FontSize="14" VerticalAlignment="Center" Margin="0,17,0,16" Grid.ColumnSpan="2" ></TextBlock>
<TextBlock Text="{Binding kor_txt}" Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="2" FontSize="14" VerticalAlignment="Center" MaxLines="2" TextWrapping="Wrap"/>
<TextBlock Text="{Binding kor_rqty}" Grid.Row="0" Visibility="{Binding VisibilityHideThenText}" Grid.Column="5" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" TextAlignment="Center"></TextBlock>
<TextBox x:Name="txtQuantity" Grid.Row="0" Text="{Binding rep_qty, Mode=TwoWay}" Visibility="{Binding VisibilityHideThenText}" Background="{Binding DeliverColor, Mode=TwoWay}" BorderBrush="{Binding DeliverColor, Mode=TwoWay}" InputScope="Number" TextAlignment="Right" Grid.Column="6" GotFocus="txtQuantity_GotFocus" Margin="6,10,-1,0" Height="39"/>
<TextBlock Text="{Binding kor_ldat}" Grid.Row="1" Visibility="{Binding VisibilityHideThenText}" Grid.Column="1" Grid.ColumnSpan="2" FontSize="14" VerticalAlignment="Top" HorizontalAlignment="Left" TextAlignment="Left"></TextBlock>
<TextBlock Text="Stock Loc.: " Grid.Row="1" Grid.Column="3" TextAlignment="Right" VerticalAlignment="Top" FontSize="14" Visibility="{Binding VisibilityHideThenText}"></TextBlock>
<TextBlock Grid.Row="1" Visibility="{Binding VisibilityHideThenText}" Tag="{Binding kor_row}" Grid.Column="4" Grid.ColumnSpan="2" VerticalAlignment="Top" FontWeight="Bold" FontSize="14" Tapped="TextBlock_Tapped" Margin="10,0,0,0"><Underline><Run Text="{Binding SelectedLocation, Mode=TwoWay}"/> </Underline></TextBlock>
<TextBlock Text="{Binding LocQuantity}" Grid.Row="1" Grid.Column="5" VerticalAlignment="Top" Visibility="{Binding VisibilityHideThenText}" FontSize="14" TextAlignment="Center"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</ScrollViewer>
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.
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>
I am having problem styling the full mode of listpicker. I want it should fully cover the page but I see a margin from the left and up in full mode.
<toolkit:ListPicker Header="SELECT TRANSLATION" x:Name="lspTranslationLang"
SelectedItem="{Binding Name, Mode=TwoWay}" SelectionChanged="lspTranslationLang_SelectionChanged">
<toolkit:ListPicker.HeaderTemplate>
<DataTemplate>
<StackPanel>
<TextBlock FontWeight="Bold" Foreground="Black" Text="Select Translation"></TextBlock>
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.HeaderTemplate>
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock FontSize="30" Text="{Binding Language}" />
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
Grid Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Margin="10,0,0,0" Width="30" Height="30" Grid.Column="0" Source="{Binding ImagePath}" ></Image>
<TextBlock Grid.Row="0" Padding="10,0,10,0" Grid.Column="1" Text="{Binding Language}" FontSize="30"/>
<TextBlock Grid.Row="1" Padding="10,0,10,0" Grid.Column="1" Text="{Binding Description}" FontSize="30"/>
<Line X1="0" X2="480" Y1="0" Y2="0" Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Bottom" StrokeThickness="1" Stroke="LightGray" />
</Grid>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
How I can change the style for full mode of listpicker?
Check out this tutorial for customizing list picker from geekchamp.
Customizing list picker
Change the data template of the full mode property. And set the margins using expression blend. It is a good editor in customizing.
You must probably add the following property
ExpansionMode="FullScreenOnly"
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.