I have this code working already but I want to change the scrolling to horizontal.
Im pretty new working with windows phone. Please any help will be appreciated.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,139,12,0">
<ListBox Name="lbLogros" Margin="0,10,-10,0" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="160" Margin="0,0,0,10">
<Image Width="140" Source="{Binding Path=rutaImagen}" />
<StackPanel Margin="20,0,0,0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" FontSize="40" Text="{Binding Path=nombre}" Style="{StaticResource MainSubtitle}" />
<TextBlock Grid.Row="1" FontSize="20" Width="290" TextWrapping="Wrap" Style="{StaticResource MainText}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget purus ligula.
</TextBlock>
</Grid>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
You just need to change your visibility, it works in my case.
ScrollViewer.HorizontalScrollBarVisibility="Visible"
To control how items are arranged within ListBox control or other similar controls, play with the ItemsPanel property. For example, using horizontal VirtualizingStackPanel for ItmsPanel will cause the items to be arranged horizontally :
<ListBox Name="lbLogros" Margin="0,10,-10,0"
ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
.....
.....
</ListBox.ItemTemplate>
</ListBox>
Related
In my previous programs I always used binding with x:name, but in this specific case I must avoid that way
Here is my View code (HomePage.xaml)
<ListView
//x:Name="MyList"
//ItemsSource="{Binding MyList}"
HasUnevenRows="False"
Grid.Row="2"
SelectionMode="None"
RowHeight="190"
Margin="0,0,0,20"
SeparatorVisibility="None"
HeightRequest="0">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame OutlineColor="Accent"
HasShadow="True"
Grid.ColumnSpan="5"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="#f4f4f4"
BorderColor="LightGray"
CornerRadius="10"
Margin="25,10,25,0"
Padding="0">
<Grid
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="5"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="13"/>
<RowDefinition Height="28"/>
<RowDefinition Height="*"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<BoxView Color="#33A8F7"
Grid.Row="0"
Grid.ColumnSpan="6"
HorizontalOptions="FillAndExpand"
VerticalOptions="StartAndExpand"/>
<Image Source="service_irrig_img.png"
Grid.Column="1"
Grid.Row="2"
Grid.RowSpan="2"
Margin="0"/>
<Image Source="location.png"
Grid.Column="2"
Grid.Row="1"
HorizontalOptions="Start"
VerticalOptions="EndAndExpand"
HeightRequest="16"
WidthRequest="16"/>
<Label Text="irrigNET"
FontFamily="{StaticResource BalooBhai}"
FontSize="16"
Grid.Column="3"
Grid.Row="1"
Grid.ColumnSpan="2"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
Margin="0,8,0,0"
TextColor="#262f41"/>
<Image Source="service_arrow.png"
Grid.Column="4"
Grid.Row="2"
VerticalOptions="Center"
HorizontalOptions="Center"
HeightRequest="18"
WidthRequest="18"/>
<Image Source="clock.png"
Grid.Column="2"
Grid.Row="3"
HorizontalOptions="Center"
VerticalOptions="Start"
Margin="0,0,0,5"/>
<Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit."
Grid.Column="3"
Grid.Row="2"
VerticalTextAlignment="Start"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
TextColor="#262f41"
Margin="0,10,0,0"/>
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Just for test purpose, in my HomePage.cs
I used
List<string> MylistItems = new List<string> { "element1", "element2", "element3" };
MyList.ItemsSource = MylistItems;
and everythin worked fine, ListView is populated on correct way.
But, now I want to acchive the same output using MVVM patern, avoiding x:name.
I have the following code in Xamarin C#, I wish to link the RichTextBlockOverflow in the following code to the RichTextBlock above it so that the overflowed content is displayed. I am trying to create horizontal pagination using this, so please let me know if I am in the right direction. Thanks :)
XAML:
<StackPanel Height="{Binding ActualHeight, ElementName=grid}"
Width="{Binding ActualWidth, ElementName=grid}"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<RichTextBlock Height="{Binding ActualHeight, ElementName=grid}"
MaxHeight="{Binding MaxHeight, ElementName=grid}"
Name="TextBlock"
local:HtmlToRtfConverter.Html="{Binding Html}" />
<RichTextBlockOverflow Name="RichBlockOverflow" />
</StackPanel>
Found an answer:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<RichTextBlock Grid.Column="0"
OverflowContentTarget="{Binding ElementName=overflowContainer}" >
<Paragraph>
Proin ac metus at quam luctus ultricies.
</Paragraph>
</RichTextBlock>
<RichTextBlockOverflow x:Name="overflowContainer" Grid.Column="1"/>
</Grid>
Source: Link
I am loocking to get the same columns width on my two ListViews with binding, currently I found the tool of visual studio: "Create data Binding" and selecting ElementName and my ListView_Original but inside are too many properties and I cant found ColumnDefinition anyway:
I am trying using Width="{Binding Width, ElementName=ListView_FP, Source=Column_Number, Mode=OneWay}" without results but I guess I am near the solution.
What is the correct way to do a binding width of the ColumnDefinition
of other Listview.
This is the original listview:
<ListView x:Name="ListView_Original" MaxHeight="400" HorizontalAlignment="Stretch" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1" Background="WhiteSmoke" SelectionChanged="ListView_Original_SelectionChanged" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Padding="0" Margin="0" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" x:name="Column_Number"/>
<ColumnDefinition Width="*" x:name="Column_Name"/>
<ColumnDefinition Width="*" x:name="Column_Skill"//>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<TextBox Grid.Column="0" TextWrapping="Wrap" BorderBrush="Black" IsReadOnly="True" TextAlignment="Left" IsHitTestVisible="False" x:Name="TextBox_Number" Text="{Binding Path=Number}"/>
<TextBox Grid.Column="1" TextWrapping="Wrap" BorderBrush="Black" IsReadOnly="True" TextAlignment="Center" IsHitTestVisible="False" x:Name="TextBox_Name" Text="{Binding Path=Name}"/>
<TextBox Grid.Column="2" TextWrapping="Wrap" BorderBrush="Black" IsReadOnly="True" TextAlignment="Center" IsHitTestVisible="False" x:Name="TextBox_Skill" Text="{Binding Path=Skill}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
And this is the listview what its columns should do binding:
<ListView x:Name="ListView_Copy" MaxHeight="400" HorizontalAlignment="Stretch" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1" Background="WhiteSmoke" SelectionChanged="ListView_Copy_SelectionChanged" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid Padding="0" Margin="0" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding Width, ElementName=ListView_FP, Source=Column_Number, Mode=OneWay}"/>
<ColumnDefinition Width="{Binding Width, ElementName=ListView_FP, Source=Column_Name, Mode=OneWay}"/>
<ColumnDefinition Width="{Binding Width, ElementName=ListView_FP, Source=Column_Skill, Mode=OneWay}"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<TextBox Grid.Column="0" TextWrapping="Wrap" BorderBrush="Black" IsReadOnly="True" TextAlignment="Left" IsHitTestVisible="False" x:Name="TextBox_Number" Text="{Binding Path=Number}"/>
<TextBox Grid.Column="1" TextWrapping="Wrap" BorderBrush="Black" IsReadOnly="True" TextAlignment="Center" IsHitTestVisible="False" x:Name="TextBox_Name" Text="{Binding Path=Name}"/>
<TextBox Grid.Column="2" TextWrapping="Wrap" BorderBrush="Black" IsReadOnly="True" TextAlignment="Center" IsHitTestVisible="False" x:Name="TextBox_Skill" Text="{Binding Path=Skill}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Any help is appreciated.
x:Name property used in a DataTemplate are not available outside of it, so you have to going to bind the ColumnDefinition Width to a value that can be accesible by both ListView's DataTemplates.
I've created a sample based on your code that was able to get the same, dynamic width in both ColumnDefinitions using binding.
First, I have this shared DataTemplate for ListViews:
<Page.Resources>
<DataTemplate x:Key="SimpleTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="MainDefinition" Width="{Binding ElementName=MainPageName, Path=SameWidth, Converter={StaticResource DoubleToGridLength}, Mode=OneWay}"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<SymbolIcon Symbol="Accept" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<TextBlock Grid.Column="1" Text="{Binding}" VerticalAlignment="Center" FontSize="16"/>
</Grid>
</DataTemplate>
</Page.Resources>
Then, my ListViews:
<ListView Grid.Row="1"
ItemsSource="{x:Bind ListOneItems}"
ItemTemplate="{StaticResource SimpleTemplate}"/>
<ListView Grid.Row="1"
Grid.Column="2"
ItemsSource="{x:Bind ListTwoItems}"
ItemTemplate="{StaticResource SimpleTemplate}"/>
And the Page's code-behind:
private double _sameWidth;
public double SameWidth
{
get { return _sameWidth; }
set { _sameWidth = value; OnPropertyChanged(); }
}
public ObservableCollection<string> ListOneItems { get; set; }
public ObservableCollection<string> ListTwoItems { get; set; }
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
var text =
#"Fugiat laborum cupidatat labore ad dolor officia Lorem ipsum cillum cupidatat dolore enim. Irure aliqua tempor non cupidatat est excepteur nisi labore magna nisi in consequat. Minim ex magna nulla deserunt ad. Proident pariatur deserunt ex voluptate proident irure. Dolore cillum dolor proident eu mollit amet nisi non velit sint.";
var listOneWords = text.Split(' ').ToList().Take(10);
var listTwoWords = text.Split(' ').ToList().Skip(10).Take(10);
ListOneItems = new ObservableCollection<string>(listOneWords);
ListTwoItems = new ObservableCollection<string>(listTwoWords);
SameWidth = 48;
}
Also, you would need the DoubleToGridLengthConverter:
public class DoubleToGridLengthConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
var width = (double) value;
var length = new GridLength(width);
return length;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new System.NotImplementedException();
}
}
The final part is a Slider binded to SameWidth property that change the ColumnDefinition Width dynamically.
<Slider x:Name="MainSlider" Grid.ColumnSpan="2"
Minimum="48"
Maximum="120"
Value="{x:Bind SameWidth, Mode=TwoWay}"/>
Hope this helps you!
I have a StackPanel representing the top bar and a Hub representing books items. Both wrapped in the grid with two rows.
The problem is that in design mode hub content aligned properly to the top, just below my top bar. But in emulator it looks like all content aligned to the center of the hub.
In design time it looks like this:
But in emulator it looks like this:
Here is my XAML code:
<Page.Resources>
<DataTemplate x:Key="HubSectionHeaderTemplate">
<TextBlock Margin="0,0,0,-10" Text="{Binding}" FontSize="19" FontFamily="Open Sans" FontWeight="Light" FontStretch="ExtraExpanded" Foreground="#FF30323E">
<!--<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>-->
</TextBlock>
</DataTemplate>
<!-- Grid-appropriate item template as seen in section 2 -->
<DataTemplate x:Key="Standard200x180TileItemTemplate">
<Grid Margin="0,0,15,15" Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" VerticalAlignment="Top">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="165" Width="115"/>
<!--<TextBlock Text="{Binding Title}" VerticalAlignment="Bottom" Margin="9.5,0,0,6.5" Style="{ThemeResource BaseTextBlockStyle}"/>-->
</Grid>
</DataTemplate>
</Page.Resources>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="0,-25,0,0">
<StackPanel.Background>
<ImageBrush ImageSource="Assets/CatalogTopBar.png" Stretch="UniformToFill"/>
</StackPanel.Background>
<Button x:Name="searchButton" Margin="0,25,-30,0" Height="15" Width="10" Content="" HorizontalAlignment="Right" VerticalAlignment="Center" BorderThickness="0" >
<Button.Background>
<ImageBrush ImageSource="Assets/noun_23695_cc.png" Stretch="Uniform"/>
</Button.Background>
</Button>
</StackPanel>
<Hub x:Name="Hub" x:Uid="Hub" Grid.Row="1" Background="White" Margin="0,25,0,0" VerticalContentAlignment="Top" VerticalAlignment="Top">
<HubSection x:Uid="HubSection2" Header="Популярные книги" Width="Auto"
DataContext="{Binding Groups[0]}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}" >
<DataTemplate>
<GridView
Margin="0,-10,0,0"
ItemsSource="{Binding Items}"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items In Group"
ItemTemplate="{StaticResource Standard200x180TileItemTemplate}"
SelectionMode="None"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</DataTemplate>
</HubSection>
</Hub>
</Grid>
</Page>
Ho-ho-ho... I finally managed to find the problem. After spending WEEKS!!! WEEKS, Carl! After spending few weeks I found out by accident that there is a MASSIVE "application name" <Hub.title> above my <Grid>.
It was not visible because of the white background and white font color of the text. By accidentally changing <RequestedTheme="Light"> I was finally able to see this text, because default font color changed to black. The text "application name" itself was not in my XAML source file, it was attached by localization facilities with x:Uid ="Hub" and corresponding value in resources.resw. After deleting x:Uid my layout returned to normal...
I have the following XAML:
<Grid>
<ListView x:Name="IconTextGrid" Height="500">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width="220" Height="60">
<Border Background="#66727272" Width="40" Height="40" Margin="10">
<Image Source="/SampleImage.png" Height="32" Width="32" Stretch="UniformToFill"/>
</Border>
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<TextBlock Text="Ay Lorem Ipsum" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis" />
<TextBlock Text="Dolor sit amet" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="8"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto"/>
</ListView>
</Grid>
</Page>
Which should present items that can be selected by the user.
The problem here is that When I have more than few items (like more than 100) there is no horizontal scroll.
My question is why and how can I fix it?
thanks.
try doing this...
<Grid>
<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto">
<ListView x:Name="IconTextGrid" Height="500">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width="220" Height="60">
<Border Background="#66727272" Width="40" Height="40" Margin="10">
<Image Source="/SampleImage.png" Height="32" Width="32" Stretch="UniformToFill"/>
</Border>
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<TextBlock Text="Ay Lorem Ipsum" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis" />
<TextBlock Text="Dolor sit amet" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="8"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</ScrollViewer>
</Grid>