This is part of my code:
<DataTemplate x:Key="lbSongsTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Artist}" Grid.Column="0"/>
<TextBlock Text=" - " Grid.Column="1"/>
<TextBlock Text="{Binding Title}" TextWrapping="NoWrap" Grid.Column="2"/>
<Button Command="{Binding ElementName=root1, Path=DataContext.DownloadSong}" CommandParameter="{Binding}" Grid.Column="3" Padding="0" Margin="0" BorderThickness="0" Width="20" Height="20">
<Button.Content>
<Image Source="Images/like.jpg" Height="20" Width="20" />
</Button.Content>
</Button>
<TextBlock Text="{Binding Duration}" Grid.Column="4" HorizontalAlignment="Right"/>
</Grid>
</DataTemplate>
Button have image in content property. Why this image doesn't showing?
If button is not templated its work fine.
Related
I have an issue with a component on my MAUI application:
When i load the page that the component (a bar) is shown appears like this:
Image on loading
But, when i touch the size of my windows, the layout fix immediatly.
Image after windows resize
This is the xaml of the page that contains the bar:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:res="clr-namespace:APEEvo.Mobile.Resources"
xmlns:components="clr-namespace:APEEvo.Mobile.Components"
x:Class="APEEvo.Mobile.ReturnFileSearch.ReturnFileDetailPage"
Loaded="ContentPage_Loaded">
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.ColumnSpan="2">
<components:InfoBar x:Name="infoBar" VerticalOptions="Start"/>
</StackLayout>
<StackLayout Grid.Row="1" Grid.ColumnSpan="2" Margin="0,0,0,30">
<components:ReturnFileBar x:Name="ReturnFileBar" VerticalOptions="Center"/>
</StackLayout>
<HorizontalStackLayout Grid.Row="2" Grid.ColumnSpan="2" >
<Label Text="{x:Static res:UIStrings.Article}" HorizontalOptions="Start" Margin="10,0" Style="{StaticResource TopDetailPageLabel}"/>
<components:BarcodeScanner x:Name="barcodeScanner" BackgroundColor="{StaticResource TertiaryAccent}" HorizontalOptions="Start" VerticalOptions="Center" ButtonVisible="true" Caption="{x:Static res:UIStrings.ArticleBarcode}" Margin="20,0"/>
<Button x:Name="buttonNavigation" HorizontalOptions="Start" VerticalOptions="Center" Text="Test" Margin="20,0" Clicked="ButtonNavigation_Clicked"/>
</HorizontalStackLayout>
<StackLayout Grid.Row="3" Grid.ColumnSpan="2" Padding="30" >
<components:OutcomeSummary x:Name="grpOutcomes" HeightRequest="450"/>
</StackLayout>
</Grid>
</ScrollView>
</ContentPage>
And this the xaml of the component:
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:res="clr-namespace:APEEvo.Mobile.Resources"
x:Class="APEEvo.Mobile.Components.ReturnFileBar">
<Grid x:Name="grdFileDetailBar" BackgroundColor="{StaticResource PrimaryBarColor}">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<HorizontalStackLayout Grid.Column="0" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="{x:Static res:UIStrings.Return}" Style="{StaticResource TopReturnFileLabel}" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,5,0" />
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2" />
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="1" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.Key}" />
<Label x:Name="txtKey" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="2" Margin="5,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.Date}" />
<Label x:Name="txtDateOfWhat" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="3"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="3" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.Type}" />
<Label x:Name="txtType" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="4" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.Reason}" />
<Label x:Name="txtReason" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="5" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.ReconditionType}" />
<Label x:Name="txtRecondition" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="6" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.SAPInboundDelivery}" />
<Label x:Name="txtSapInbound" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="7" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.IctReference}" />
<Label x:Name="txtIctReference" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
<Line Grid.Column="1" Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="8" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label Style="{StaticResource DetailOutcomeLabelTitle}" Text="{x:Static res:UIStrings.NPcs}" />
<Label x:Name="txtNPcs" Style="{StaticResource DetailOutcomeLabelValue}" />
</VerticalStackLayout>
</Grid>
</HorizontalStackLayout>
</Grid>
</Grid>
</ContentView>
Can you help me?
"nested layouts" with auto-sizing are sometimes difficult for layout manager to figure out correctly. You can greatly simplify the XAML of your component.
Original:
<Grid x:Name="grdFileDetailBar" BackgroundColor="{StaticResource PrimaryBarColor}">
<Grid.RowDefinitions> <RowDefinition Height="50" /> </Grid.RowDefinitions>
<Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions>
<Grid >
<Grid.ColumnDefinitions> ...9 Autos... </Grid.ColumnDefinitions>
<HorizontalStackLayout Grid.Column="0" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions> ...2 Autos... </Grid.ColumnDefinitions>
<Label Grid.Column="0" ... />
<Line Grid.Column="1" ... />
</Grid>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Column="1" Margin="5,0" >
<Grid>
<Grid.ColumnDefinitions> ...2 Autos... </Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label ... />
<Label x:Name="txtKey" ... />
</VerticalStackLayout>
<Line Grid.Column="1" ... />
</Grid>
</HorizontalStackLayout>
... more elements ...
</Grid>
</Grid>
Simplified:
<Grid x:Name="grdFileDetailBar" BackgroundColor="{StaticResource PrimaryBarColor}">
<Grid.RowDefinitions> <RowDefinition Height="50" /> </Grid.RowDefinitions>
<Grid.ColumnDefinitions> ...9 Autos... </Grid.ColumnDefinitions>
<Grid Grid.Column="0" Margin="5,0">
<Grid.ColumnDefinitions> ...2 Autos... </Grid.ColumnDefinitions>
<Label Grid.Column="0" ... />
<Line Grid.Column="1" ... />
</Grid>
<Grid Grid.Column="1" Margin="5,0">
<Grid.ColumnDefinitions> ...2 Autos... </Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0" Margin="0,0,5,0" VerticalOptions="Center" >
<Label ... />
<Label x:Name="txtKey" ... />
</VerticalStackLayout>
<Line Grid.Column="1" ... />
</Grid>
... more elements ...
</Grid>
Removed from above: One layer of grid; VerticalStackLayouts that served no purpose, as they only contained a single Grid each.
Does this work better?
[OPTIONAL] Flattened:
If above doesn't work, try to "flatten" into a single Grid (below will need tweaking of margins):
<Grid x:Name="grdFileDetailBar" BackgroundColor="{StaticResource PrimaryBarColor}">
<Grid.RowDefinitions> <RowDefinition Height="50" /> </Grid.RowDefinitions>
<Grid.ColumnDefinitions> ...many Autos... </Grid.ColumnDefinitions>
<Label Grid.Column="0" ... Margin="5,0" />
<Line Grid.Column="1" ... Margin="5,0" />
<VerticalStackLayout Grid.Column="3" Margin="0,0,5,0" VerticalOptions="Center" >
<Label ... />
<Label x:Name="txtKey" ... />
</VerticalStackLayout>
<Line Grid.Column="4" ... />
... more elements ...
</Grid>
ALTERNATIVE TECHNIQUE:
Adding explicit WidthRequest="NN"s, where "NN" is some number, will fix most layout issues. Obviously this hardcodes those widths, so is less desireable. But sometimes it is the only way.
I have three columns. I setup header of ListView to display data - its work correct. I similarly setup ListView ItemTemplate but it incorrect displays data.
<Grid>
<ListView x:Name="listView" Grid.Column="0">
<ListView.HeaderTemplate>
<DataTemplate>
<Grid Background="Gray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Блюдо" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18" ></TextBlock>
<TextBlock Text="Цена" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18" ></TextBlock>
<TextBlock Text="Количество" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18" ></TextBlock>
</Grid>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding bludo}" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontSize="18" ></TextBlock>
<TextBlock Text="{Binding tsena}" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontSize="18" ></TextBlock>
<TextBlock Text="{Binding kol}" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontSize="18" ></TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
The problem here is that in ListViewItem, it's HorizontalContentAlignment property is set to Left by default. This property indicates the horizontal alignment of the control's content. When it is set to Left, the ListViewItem's content i.e the Grid in your DataTemplate will be left aligned. So the Gird won't take the whole width of the ListView and you will see the "strange" layout like your screenshot.
To see this clearly, we can check ListViewItem styles and templates, in its default style, we can see
<Setter Property="HorizontalContentAlignment" Value="Left"/>
To fix this issue, we can set the HorizontalContentAlignment property to Stretch like:
<ListView x:Name="listView" Grid.Column="0">
<ListView.HeaderTemplate>
<DataTemplate>
<Grid Background="Gray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" FontWeight="Bold" Text="Блюдо" />
<TextBlock Grid.Column="1" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" FontWeight="Bold" Text="Цена" />
<TextBlock Grid.Column="2" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" FontWeight="Bold" Text="Количество" />
</Grid>
</DataTemplate>
</ListView.HeaderTemplate>
<!-- Add this in your code -->
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" Text="{Binding bludo}" />
<TextBlock Grid.Column="1" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" Text="{Binding tsena}" />
<TextBlock Grid.Column="2" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" Text="{Binding kol}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I am trying to make the listview in the picture to the third row on the grid, which is below the slider controls. Unfortunately it is not taking its position as per the definition. Please advise
Here is the definition:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/> <!--Top date-->
<RowDefinition Height="10"/> <!--Just space between top date & slider controls-->
<RowDefinition Height="Auto"/> <!--Slider row-->
<RowDefinition Height="*"/> <!--Favorite shifts list view-->
</Grid.RowDefinitions>
<TextBlock x:Name="tbDate" Grid.Row="0" Text="Mon 28 April" Foreground="White" HorizontalAlignment="Center" FontSize="23" Margin="6,0,0,0" Style="{StaticResource MessageDialogTitleStyle}"/>
<Grid Grid.Row="2" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="88.333"/>
<ColumnDefinition Width="Auto" MinWidth="193.333"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnAddToFavs" Grid.Column="0" Content="ADD" Click="btnAddToFavs_Click"/>
<StackPanel Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Center" Margin="0,0,0.333,0" Width="88">
<Slider x:Name="sliderStartTime" Orientation="Vertical" LargeChange="0" Maximum="48" SmallChange="0" Margin="0,31,0,-332" Style="{StaticResource SliderStartStyle}" IsDirectionReversed="True" HorizontalAlignment="Center" />
<Border Background="White" CornerRadius="5" Width="Auto">
<TextBlock x:Name="tbShiftStart" Text="{Binding Value, Converter={StaticResource sliderValueToHoursConverter}, ElementName=sliderStartTime}" Foreground="Red" FontSize="13" FontFamily="Nirmala UI" Width="55" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Vertical" HorizontalAlignment="Center" Margin="0.333,0,0,0" Width="88">
<Slider x:Name="sliderEndTime" Orientation="Vertical" LargeChange="0" Maximum="48" SmallChange="0" Margin="0,31,0,-332" Style="{StaticResource SliderEndStyle}" IsDirectionReversed="True" HorizontalAlignment="Center" Value="48" />
<Border Background="White" CornerRadius="5" Width="Auto">
<TextBlock x:Name="tbShiftEnd" Text="{Binding Value, Converter={StaticResource sliderValueToHoursConverter}, ElementName=sliderEndTime}" Foreground="Green" FontSize="13" FontFamily="Nirmala UI" Width="55" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</StackPanel>
</Grid>
<ListView x:Name="lvFavShifts" Grid.Row="3" Foreground="Red" FontSize="40" MaxHeight="300" Margin="0,40" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border BorderThickness="12" Background="#FFC2CEDC" Grid.Column="0" Grid.ColumnSpan="5" CornerRadius="15"/>
<Button x:Name="btnSetShift" Content="Set" Background="Green" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
<TextBlock x:Name="tbFavShiftStart" Grid.Column="1" Text="{Binding theStartTime}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
<TextBlock x:Name="tbHyphen" Grid.Column="2" Text="-" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
<TextBlock x:Name="tbFavShiftEnd" Grid.Column="3" Text="{Binding theEndTime}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
<Button x:Name="btnDeleteShift" Content="Delete" Background="Red" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Ive changed your code a bit to hopefully get a better result. Its not ideal but should be more easily tweaked for desired result.
The main change is that the Margins like
<Slider x:Name="sliderStartTime" Margin="0,31,0,-332" />
have gone as they are a recipe for disaster on varying screen sizes. Have a look and see what you think.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/> //its ok to set height here
<!--Top date-->
<RowDefinition Height="10"/>
<!--Just space between top date & slider controls-->
<RowDefinition Height="Auto"/>
<!--Slider row-->
<RowDefinition Height="*"/>
<!--Favorite shifts list view-->
</Grid.RowDefinitions>
<TextBlock x:Name="tbDate" Grid.Row="0" Text="Mon 28 April" Foreground="White" HorizontalAlignment="Center" FontSize="23" Margin="6,0,0,0" Style="{StaticResource MessageDialogTitleStyle}"/>
<Grid Grid.Row="2" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="1*"/> //adaptable fit to varying screen sizes
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnAddToFavs" Grid.Column="0" Content="ADD" />
<StackPanel Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Center" Width="88">
<Border Background="White" CornerRadius="5" Width="Auto">
<TextBlock x:Name="tbShiftStart" Text="30" Foreground="Red"
FontSize="13" FontFamily="Nirmala UI"
Width="55" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Slider x:Name="sliderStartTime" Orientation="Vertical" LargeChange="0" Maximum="48"
SmallChange="0"
IsDirectionReversed="True" HorizontalAlignment="Center" Height="300"
/> // Slider has a reasonable height. You probably want control of this on phones
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Vertical" HorizontalAlignment="Center" Width="88">
<Border Background="White" CornerRadius="5" Width="Auto">
<TextBlock x:Name="tbShiftEnd" Text="22" Foreground="Green" FontSize="13" FontFamily="Nirmala UI" Width="55" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Slider x:Name="sliderEndTime" Orientation="Vertical" LargeChange="0" Maximum="48" SmallChange="0" IsDirectionReversed="True" HorizontalAlignment="Center"
VerticalAlignment="Stretch" Value="48" Height="300" />
</StackPanel>
</Grid>
<ListView x:Name="lvFavShifts" Grid.Row="3" Foreground="Red"
FontSize="40" Margin="0,40" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border BorderThickness="12" Background="#FFC2CEDC" Grid.Column="0" Grid.ColumnSpan="5"
CornerRadius="15"/>
<Button x:Name="btnSetShift" Content="Set" Background="Green" Grid.Column="0"
HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
<TextBlock x:Name="tbFavShiftStart" Grid.Column="1" Text="{Binding theStartTime}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
<TextBlock x:Name="tbHyphen" Grid.Column="2" Text="-" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
<TextBlock x:Name="tbFavShiftEnd" Grid.Column="3" Text="{Binding theEndTime}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
<Button x:Name="btnDeleteShift" Content="Delete" Background="Red" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
I know this question sounds trivial but since I am new to windows phone development i cannot seem to understand how to do this in my scenario.
I have a
List<Forecast> forecasts
which i want to connect to my WeatherInfoBar
<Grid x:Name="WeatherInfoLowBar" Height="300" VerticalAlignment="Bottom">
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="0,0,0,0">
<StackPanel Grid.Row="4" Height="40" Orientation="Horizontal" Margin="0,0,0,0">
<TextBlock Text="Date" FontSize="22" TextAlignment="Left" Width="170"/>
<TextBlock Text="FC" FontSize="22" TextAlignment="Left" Width="60"/>
<TextBlock Text="Max" FontSize="22" TextAlignment="Right" Width="60"/>
<TextBlock Text="Min" FontSize="22" TextAlignment="Right" Width="90"/>
</StackPanel>
<Grid >
<StackPanel Height="40" Orientation="Horizontal" Margin="0,10,0,0">
<TextBlock Text="{Binding date}" FontSize="22" TextAlignment="Left" Width="150"/>
<TextBlock Text=" " FontSize="20"/>
<Image Source="{Binding weatherIconUrl}" Width="40" Height="40"/>
<TextBlock Text=" " FontSize="20"/>
<TextBlock Text="{Binding tempMaxC, StringFormat='\{0\} °C'}" FontSize="22" TextAlignment="Right" Width="70"/>
<TextBlock Text=" " FontSize="20"/>
<TextBlock Text="{Binding tempMinC, StringFormat='\{0\} °C'}" FontSize="22" TextAlignment="Right" Width="70"/>
</StackPanel>
</Grid>
</StackPanel>
</Grid>
In code behind
WeatherInfoLowBar.DataContext = wio.forecasts;
for (int i = 0; i < wio.forecasts.Count(); i++ )
// what code goes in here ???
I would structure the XAML something like this:
<Grid x:Name="WeatherInfoLowBar" Height="300" VerticalAlignment="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="170"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="90"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Date" FontSize="22" TextAlignment="Left" Width="170"/>
<TextBlock Grid.Column="1" Text="FC" FontSize="22" TextAlignment="Left" Width="60"/>
<TextBlock Grid.Column="2" Text="Max" FontSize="22" TextAlignment="Right" Width="60"/>
<TextBlock Grid.Column="3" Text="Min" FontSize="22" TextAlignment="Right" Width="90"/>
<ListBox Name="myListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="170"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="90"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding date}" FontSize="22" TextAlignment="Left" Width="150"/>
<Image Source="{Binding weatherIconUrl}" Width="40" Height="40"/>
<TextBlock Text="{Binding tempMaxC, StringFormat='\{0\} °C'}" FontSize="22" TextAlignment="Right" Width="70"/>
<TextBlock Text="{Binding tempMinC, StringFormat='\{0\} °C'}" FontSize="22" TextAlignment="Right" Width="70"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Then you can use the List<> as an ItemsSource for the ListBox:
myListBox.ItemsSource = wio.forecasts;
I'm having trouble with what seems to be a weird issue with a listview in xaml for Windows 8.1. I'm using the Hub sample template that comes with VS 2013 Preview on Windows 8.1. For whatever reason, the first entry in the listview does not show up. I'm binding the listview with the sample JSON data provided in the app. It doesn't make a difference whether I bind to the sample data or to my own data in a sqlite db file either. I'd post a picture, but I dont have enough reputation on stackoverflow just yet... The intent is to represent data in a table with columns. Everything in the xaml works except that it hides the first entry in the listview...
Here's the code.
<Grid x:Name="TransactionGrid" Grid.Column="1" Grid.Row="1"
Background="{ThemeResource AppBarItemBackgroundThemeBrush}"
DataContext="{Binding Group}"
d:DataContext="{Binding Groups[0], Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid x:Name="TransactionHeader" Margin="0,0,0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width="1.5*"/>
<ColumnDefinition Width="1.25*"/>
<ColumnDefinition Width="1.75*"/>
<ColumnDefinition Width=".75*"/>
<ColumnDefinition Width=".75*"/>
<ColumnDefinition Width=".25*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="Date"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Center" Margin="0,0,0,5"/>
<TextBlock Grid.Column="1"
Text="Payee"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Left" Margin="0,0,0,5"/>
<TextBlock Grid.Column="2"
Text="Category"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Left" Margin="0,0,0,5"/>
<TextBlock Grid.Column="3"
Text="Description"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Left" Margin="0,0,0,5"/>
<TextBlock Grid.Column="4"
Text="Amount"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Right" Margin="0,0,0,5"/>
<TextBlock Grid.Column="5"
Text="Balance"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Right" Margin="0,0,0,5"/>
</Grid>
<ListView x:Name="TransactionListview"
Grid.Row="1"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
IsSynchronizedWithCurrentItem="False" IsItemClickEnabled="True">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="{Binding ElementName=TransactionListview, Path=ActualWidth}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width="1.5*"/>
<ColumnDefinition Width="1.25*"/>
<ColumnDefinition Width="1.75*"/>
<ColumnDefinition Width=".75*"/>
<ColumnDefinition Width=".75*"/>
<ColumnDefinition Width=".25*"/>
</Grid.ColumnDefinitions>
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"
Width="Auto"
Height="40"
Grid.ColumnSpan="7" />
<TextBlock Grid.Column="0"
Text="{Binding Title}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin = "1,0,0,0"
FontSize="17" />
<TextBlock Grid.Column="1"
Text="{Binding Subtitle}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
FontSize="17"/>
<TextBlock Grid.Column="2"
Text="{Binding ImagePath}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
FontSize="17"/>
<TextBlock Grid.Column="3"
Text="{Binding Description}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin = "0,0,20,0"
FontSize="17"/>
<TextBlock Grid.Column="4"
Text="{Binding Title}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
FontSize="17"/>
<TextBlock Grid.Column="5"
Text="{Binding Title}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
FontSize="17"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
This was cross-posted to MSDN forum where product team is answering:
http://social.msdn.microsoft.com/Forums/windowsapps/en-US/8b9f3365-97d5-4405-a677-7b8638a32312/xaml-listview-in-win-81-not-showing-first-entry