.Gridview not scrolling horizontally in windows phone app instead it is scrolling vertically.I just copy paste the code of my windows 8.1 app to windows phone 8.1 but it is scrolling vertically.
here is the xaml code:
<Grid>
<Grid.Background>
<ImageBrush ImageSource="Assets/back3.png"></ImageBrush>
</Grid.Background>
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height=".6*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Select Comic" Foreground="Black" FontSize="30" VerticalAlignment="Center" Grid.Row="0" Grid.Column="1"></TextBlock>
<!-- Back button and page title -->
<GridView x:Name="myGridview" Grid.Column="1" Grid.Row="1" SelectionChanged="myGridview_SelectionChanged">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,20,20">
<Image Source="{Binding source}" Width="100" Height="100" Stretch="Fill"></Image>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
Try by putting
ItemsPanel,ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Visible"
<GridView Width="400" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"></VirtualizingStackPanel>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,20,20">
<Image Source="{Binding source}" Width="100" Height="100" Stretch="Fill"></Image>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
Update
try by changing Itemspanel : WrapGrid Orientation="Vertical" or Orientation="Horizontal"
<GridView Width="400" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical"></WrapGrid>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,20,20">
<Image Source="{Binding source}" Width="100" Height="100" Stretch="Fill"></Image>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
Related
I have a ListView with a ListView.ItemTemplate if it is important: the ListView is part of a Grid). I will strip it down here for the minumum:
<ListView x:Name="lstFotos" Grid.Row="2" Grid.Column="1" Height="auto" Tapped="imageControl_Tapped" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid IsTapEnabled="True" >
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image x:Name="imageControl" Width="200" Height="200" Source="{Binding DateiSoftwareBitmapSource}" IsTapEnabled="True" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" />
<TextBlock x:Name="txtImageDateDescription" Text="Aufnahmedatum: " Grid.Column="1" Grid.Row="0" />
<TextBlock x:Name="txtImageDescriptionDescription" Text="Beschreibung: " Grid.Column="1" Grid.Row="1" />
<TextBlock x:Name="txtImageDate" Text="{Binding Datum}" Grid.Column="2" Grid.Row="0" />
<TextBox x:Name="txtImageDescription" Text="{Binding Beschreibung}" Grid.Column="2" Grid.Row="1" />
<Button x:Name="btnSpeichern" Content="Speichern" Grid.Column="3" Grid.Row="1" Click="btnSpeichern_Click" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In the code behing I do a
lstFotos.ItemsSource = AlleAnzeigeFotos
AlleAnzeigeFotos is a List(Of myClass), myClass contains the properties Datum, Beschreibung, DateiSoftwareBitmapSource.
What I want to do is that the user can edit the textfield, presses on the button and in the code behing I want to update the class and do some more stuff.
How can I get the appropriate instance of that class when I click the button?
UPDATE:
This is how it looks like:
"Beschreibung" (english: description) is empy after adding a foto and should be editable and stored by clicking "Speichern" (save).
(sender as Button).DataContext will give you the item which you clicked. Cast it to appropriate type of your class
update
Text="{Binding Beschreibung,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
var userenteredstring=((sender as Button).DataContext as your class).Beschreibung
I have a popup for select colors.
<Popup x:Name="colorSelectorPopup">
<Border BorderThickness="1" BorderBrush="Gray">
<StackPanel HorizontalAlignment="Stretch">
<Grid x:Name="colorSelectorTitle" Height="40" VerticalAlignment="Top">
<TextBlock x:Name="popupTitle" TextTrimming="CharacterEllipsis" FontSize="16" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="8"/>
</Grid>
<ListView x:Name="colorList" HorizontalAlignment="Stretch" Background="White">
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" x:Name="tbColor" Text="{Binding ColorName}" Foreground="{Binding ForegroundColor}" HorizontalAlignment="Left"/>
<RadioButton Grid.Column="1" x:Name="radioColor" GroupName="colorRadio" Tag="{Binding SelectionColor}" MinWidth="32" Checked="radioColor_Checked"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Border>
</Popup>
I want the radio button to show on the right side. But It looks as in the image.
How can I move the radio button to the right side?
I got the answer from here.
By Adding the following xaml I got the desired output.
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
This works for me. I have updated my xaml as follows
<Popup x:Name="colorSelectorPopup">
<Border BorderThickness="1" BorderBrush="Gray">
<StackPanel HorizontalAlignment="Stretch">
<Grid x:Name="colorSelectorTitle" Height="40" VerticalAlignment="Top">
<TextBlock x:Name="popupTitle" TextTrimming="CharacterEllipsis" FontSize="16" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="8"/>
</Grid>
<ListView x:Name="colorList" HorizontalAlignment="Stretch" Background="White">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" x:Name="tbColor" Text="{Binding ColorName}" Foreground="{Binding ForegroundColor}" HorizontalAlignment="Left"/>
<RadioButton Grid.Column="1" x:Name="radioColor" GroupName="colorRadio" Tag="{Binding SelectionColor}" MinWidth="32" Checked="radioColor_Checked"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Border>
</Popup>
Since the grid only contains 2 columns and the 2nd column only contains the radio button I would set the column definition to a fixed with for the 2nd one instead of auto. see if that works.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
I am having a problem in fixing 3 TextBlocks inside a Grid,in a metro App,I used this link enter link description here
but I get always a problem in stretching my TextBlocks inside the Grid
this is my code:
<ListView Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Stretch">
<ListView.ItemTemplate >
<DataTemplate>
<Grid Margin="0" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Margin="0">
<Image Grid.Column="0" Source="images/img1.png" Margin="0,5" Stretch="Fill" Width="80"/>
</Border>
<Grid Grid.Column="1" Margin="5" HorizontalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="text1" Text="test1" Grid.Row="0" Margin="5" HorizontalAlignment="Stretch" ></TextBlock>
<TextBlock x:Name="text2" Text="test2" Grid.Row="1" HorizontalAlignment="Stretch" ></TextBlock>
<TextBlock x:Name="text3" Text="test3" Grid.Row="2" HorizontalAlignment="Stretch" ></TextBlock>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
so please I need your help,to fix that
thanks for help
You have to edit style of ListViewItem and set HorizontalAlignment to Stretch
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
While working on MVVM in Silverlight 4.0. I got stuck with following problem.
See the following Xaml. And note that in TextBox1 the Method UpdateText (under interaction triggers) is working but in TextBox2 which is the part of DataGrid's Template,Here method 'UpdateText' is not working at all. Can anyone help me out to call a method on TextChanged Event of TextBox2?
(UpdateText is just a simple method in MVVM class working with TextBox1 but not with TextBox2)
Here is the xaml :
<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="MVVMEventTriggerDemo.Views.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:viewModel="clr-namespace:MVVMEventTriggerDemo.ViewModels"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:si="clr-namespace:Expression.Samples.Interactivity;assembly=Expression.Samples.Interactivity"
Height="600" Width="700">
<UserControl.Resources>
<viewModel:MainViewModel x:Key="MainViewmodel"/>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource MainViewmodel}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="258*" />
<ColumnDefinition Width="262*" />
</Grid.ColumnDefinitions>
<TextBox x:Name="textbox1" Text="{Binding EmployeeName, Mode=TwoWay}" Width="100" Height="30" Margin="142,77,20,289" Grid.Column="1">
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<si:CallDataMethod Method="UpdateText"/>
<si:ShowMessageBox Caption="Thank you"
Message="Thanks for trying the Example"
MessageBoxButton="OK"/>
<si:SetProperty TargetName="textbox1" PropertyName="Background" Value="PaleGoldenrod"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
<Button Content="Show Message" Width="100" Height="25" Margin="142,113,20,258" Grid.Column="1">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<si:CallDataMethod Method="HandleShowMessage"/>
<si:ShowMessageBox Caption="Thank you"
Message="Thanks for trying the Example"
MessageBoxButton="OK"/>
<si:SetProperty TargetName="LayoutRoot" PropertyName="Background" Value="PaleGoldenrod"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<sdk:DataGrid
x:Name="dgDevice"
AutoGenerateColumns="False"
Margin="13,13,13,13"
BorderThickness="1,0,1,1"
RowBackground="White"
VerticalScrollBarVisibility="Auto" Width="320"
Opacity="0.9"
Background="White"
GridLinesVisibility="None"
HeadersVisibility="None"
HorizontalScrollBarVisibility="Disabled"
ItemsSource="{Binding ActualColors,Mode=TwoWay}">
<sdk:DataGrid.Columns>
<sdk:DataGridTemplateColumn Width="320" >
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid Width="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<TextBox x:Name="textbox2" Text="{Binding EmployeeName, Mode=TwoWay}" Width="100" Height="30" Margin="142,77,20,289" Grid.Column="1">
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<si:CallDataMethod Method="UpdateText"/>
<si:ShowMessageBox Caption="Thank you"
Message="Thanks for trying the Example"
MessageBoxButton="OK"/>
<si:SetProperty TargetName="textbox2" PropertyName="Background" Value="PaleGoldenrod"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
</Grid>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
</Grid>
i not sure it can help you but in Datatemplate binding will goes like
<TextBlock Text="{Binding Path=DataContext.BusyText, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}" />
i think you may have to bind event same as text bind in upper sentence.
In my app I'm displaying some info about users in a listbox. I've got most of the stuff as I want, but the layout is bugging me a bit.
It's made with grids, so that it'll re-size and fit portrait/landscape modes.
However, I cannot get the layout to "fix itself"... let me try and explain with pictures:
As you can see the numbers at the right side isn't aligned to the right edge of the screen. How do I achieve this?
Landscape mode looks almost okay:
Below is some of the XAML:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding Picture, Mode=OneWay}" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center" Width="73" Height="73">
</Image>
<Grid Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="False">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Mode=OneWay, Path=name}" Grid.Column="0" Foreground="#FF3F9AC4" FontSize="28"
HorizontalAlignment="Left" VerticalAlignment="Center"
Style="{StaticResource PhoneTextSmallStyle}"
TextWrapping="Wrap">
</TextBlock>
<TextBlock Text="{Binding Mode=OneWay, Path=amount}" Grid.Column="1"
HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="28"
Style="{StaticResource PhoneTextSmallStyle}">
</TextBlock>
</Grid>
<TextBlock Text="{Binding Mode=OneWay, Path=description}" Grid.Row="1"
HorizontalAlignment="Right" VerticalAlignment="Center"
Style="{StaticResource PhoneTextSmallStyle}" TextWrapping="Wrap"
FontSize="24">
</TextBlock>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
You need to set the ItemContainerStyle of your ListBox so it'll stretch the ListBoxItems.
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
You could try a simpler grid:
<Grid HorizontalAlignment="Stretch" ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Image Source="{Binding Picture, Mode=OneWay}" Grid.Column="0" Grid.RowSpan="2"
VerticalAlignment="Center"
HorizontalAlignment="Center" Width="73" Height="73" />
<TextBlock Text="{Binding Mode=OneWay, Path=name}" Grid.Column="1" Foreground="#FF3F9AC4" FontSize="28"
HorizontalAlignment="Left" VerticalAlignment="Center"
Style="{StaticResource PhoneTextSmallStyle}"
TextWrapping="Wrap" />
<TextBlock Text="{Binding Mode=OneWay, Path=amount}" Grid.Column="2"
HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="28"
Style="{StaticResource PhoneTextSmallStyle}" />
<TextBlock Text="{Binding Mode=OneWay, Path=description}" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"
VerticalAlignment="Center" Style="{StaticResource PhoneTextSmallStyle}"
TextWrapping="Wrap" FontSize="24" />
</Grid>