I am using VS Studio Express 2012 on my Windows 8 machine and developing Win8 Store App, using a trial and free account.
I am using a ListBox in my app and try to populate an image with some other stuffs from a collection class. The code snippets look like this:
MainPage.xaml
<ListBox x:Name="OwnerDraw" Width="600" HorizontalAlignment="Left" ItemsSource="{Binding Statuses}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Width="300" Height="400" Source="{Binding Path=photo.imageUrl}" Stretch="Uniform"/>
<TextBlock FontSize="36" Foreground="Navy" Text="{Binding Path=id}"/>
<TextBlock FontSize="24" Foreground="Red" Text="{Binding Path=created_at}" Margin="50,0,0,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The id/created_at field displayed fine. But can't see the image.
The photo.imageUrl is something like: http://www.rsywx.net/books/cover/01732.png. The access to that site is OK and not down. A working example is here for reference.
Any help will be highly appreciated.
UPDATE: It turns out to be working now. False alarm. Sorry!
Related
I like to show images from ObservableCollection in horizontal scroll list like in Windows Store but i would scroll it horizontaly like in FlipView with all images being visible. I have something like that at this moment:
<FlipView x:Name="MasterListView" ItemsSource="{x:Bind PopularTVSeries}"
Grid.Row="1" Margin="10,10,10,0" Height="278">
<FlipView.ItemTemplate>
<DataTemplate x:DataType="data:PopularTVSeries">
<Image Source="{x:Bind poster_path}" Width="185" Height="278"
HorizontalAlignment="Left" VerticalAlignment="Center"/>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
There are controls to do it.
Method 1:
Using Carousel XAML Control by UWPCommunityToolkit. Install Microsoft.Toolkit.Uwp.UI.Controls nuget package to use it.
Here is the syntax
<controls:Carousel x:Name="CarouselControl" InvertPositive="0"
ItemDepth="0" ItemMargin="0"
ItemRotationX="0" ItemRotationY="0"
ItemRotationZ="0" Orientation="Horizontal">
<controls:Carousel.ItemTemplate>
<DataTemplate>
<Image/>
</DataTemplate>
</controls:Carousel.ItemTemplate>
</controls:Carousel>
For more info download UWP Community Toolkit Sample App
Method 2:
Using Carousel Control by AppStudio. Install WindowsAppStudio.Uwp nuget package to use it.
Here is the syntax
<controls:Carousel MaxItems="5" MinHeight="240"
MaxHeight="480" GradientOpacity="0.3">
<controls:Carousel.ItemTemplate>
<DataTemplate>
<Image/>
</DataTemplate>
</controls:Carousel.ItemTemplate>
</controls:Carousel>
For more info download Windows App Studio Sample App
Method 3:
Using GridView
<GridView ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollMode="Enabled">
<GridView.ItemTemplate>
<DataTemplate>
<Image/>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
Final working code:
<controls:Carousel
ItemsSource="{x:Bind popularTVSeries}"
x:Name="MasterListView"
InvertPositive="True"
ItemDepth="153"
ItemMargin="0"
ItemRotationX="0"
ItemRotationY="29"
ItemRotationZ ="0"
Orientation="Horizontal"
SelectedIndex="3"
Grid.Row="1">
<controls:Carousel.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</controls:Carousel.EasingFunction>
<controls:Carousel.ItemTemplate>
<DataTemplate x:DataType="data:PopularTVSeries">
<Image
Width="185"
Height="278"
VerticalAlignment="Bottom"
Source="{x:Bind poster_path}"
Stretch="Uniform" />
</DataTemplate>
</controls:Carousel.ItemTemplate>
</controls:Carousel>
I've created panel which displays controls. However I want the list of controls to always fit the width of the window. Similar to how visual studios Properties panel works. I'm assuming by using listbox I'll automatically inherit the scrollbar when the controls become lengthy.
What i have now on the left and the goal on the right.
This is visual studios.
My code behind looks like this...
<ListBox Grid.Column="0" x:Name="AssetList" ItemsSource="{Binding Attributes}" SelectionMode="Extended">
<ListBox.Resources>
<DataTemplate DataType="{x:Type model:IntAttr}">
<WrapPanel>
<TextBlock Text="{Binding Key}" Foreground="Blue"></TextBlock>
<TextBlock Text=" "></TextBlock>
<TextBlock Text="{Binding Value}"></TextBlock>
</WrapPanel>
</DataTemplate>
</ListBox.Resources>
</ListBox>
Solution:
<ListBox HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Visible"
Grid.Column="0"
x:Name="AssetList"
ItemsSource="{Binding Attributes}"
SelectionMode="Extended">....
I want my ListView to display the items in a group horizontally as displayed in the image below. I could not find anything relating to this online. This screen was taken from the Groove music application. Since I am new to asking questions here it seems I don't have enough reputation to post images therefore I provided a link to the image in question sorry for the inconvenience.
http://i.imgur.com/boCK9iy.png
Edit:
I am trying to imitate the groove music player for a school project this link below shows my app. Hopefully this give you a better idea of the problem.
http://i.imgur.com/vPJ13Sc.png
My Xaml Code:
<ListView
x:Name="itemGridView"
Grid.Row="1"
ItemsSource="{Binding Source={StaticResource artistsItemsViewSource}}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
RequestedTheme="Light">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel MaxWidth="200">
<Ellipse Height="150" Width="150">
<Ellipse.Fill>
<ImageBrush Stretch="Fill" ImageSource="Assets/Artist.png"/>
</Ellipse.Fill>
</Ellipse>
<TextBlock Text="{Binding ArtistName}" FontSize="18" HorizontalAlignment="Center" Margin="0,5,0,0" TextWrapping="Wrap"/>
<TextBlock Text="{Binding AlbumCount}" FontSize="15" HorizontalAlignment="Center" Margin="0"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Width="200" HorizontalAlignment="Left" Margin="30,0,0,0"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="0,0,0,2">
<TextBlock Text="{Binding AlphaLetter}" FontSize="20" Foreground="{StaticResource SideButtonBlue}" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
I think you can change the view in the listview settings to LargeIcon and then you can set Icons for each value in your listview.
But you could maybe use the ObjectListView its better than the plain ListView and you have more functions. check this out: click
I found something similar on the site of the objectlistview: here
for horizontal placement of the elements in ListView do this:
<ItemsStackPanel
Orientation="Horizontal" />
also, remove Width="200"
also you can use GridView instead of ListView
I'm trying to create an app with simple settings, with list boxes, etc.
I'm using C# and XAML.
I'm trying to implement something similar to the Camera app's photo settings settings panel.
Does anyone have any idea how to do this?
(I've tried Stackpanel - Scrollviewer - Stackpanel - content, however, couldn't get any transition)
You can try with ListBox,
<ListBox Grid.Row="0" ItemsSource="{Binding Settings}"
SelectionMode="Single" SelectedItem="{Binding CurrentSelectedSetting, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding SettingName}"></TextBlock>
<TextBlock Width="5"></TextBlock>
</StackPanel>
<TextBlock Text="{Binding Description}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
My Windows 8 c#/xaml app has 3 big Grids with the Content inside. Each one fills exactly out the screen. This System works very well for my purpose, until the user snapps my app.
So is it possible to completly change the Grid definitions, or pull all the textboxes,buttons and listviews in a other "snapped" Grid? Last one is just an idea.
private void pageRoot_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (ApplicationView.Value == ApplicationViewState.Snapped)
{
????
}
else
{
Grid1.Width = Windows.UI.Xaml.Window.Current.Bounds.Width;
Grid2.Width = Windows.UI.Xaml.Window.Current.Bounds.Width;
Grid3.Width = Windows.UI.Xaml.Window.Current.Bounds.Width;
}
}
This is a scenario where MVVM becomes incredibly handy. By creating two separate views, one each for snapped, filled, and full screen, you can swap between them relatively easy.
Your other option is to use the new FlipView control. There's a great example of this in the Contoso Cookbook sample app that can be found in the Windows 8 Dev Camp in a Box.
http://bit.ly/win8RCdevcamp
Here's the example code from the Contoso Hands-On Lab:
<FlipView.ItemTemplate>
<DataTemplate>
<UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
<ScrollViewer x:Name="scrollViewer" Style="{StaticResource VerticalScrollViewerStyle}" Grid.Row="1">
<!-- Vertical StackPanel for item-detail layout -->
<StackPanel Orientation="Vertical" Margin="20,0,20,0">
<StackPanel Orientation="Vertical">
<TextBlock FontSize="20" FontWeight="Light" Text="{Binding Title}" TextWrapping="Wrap"/>
<Image x:Name="image" Width="260" Margin="0,12,0,40" Stretch="Uniform" Source="{Binding Image}" HorizontalAlignment="Left"/>
</StackPanel>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="20" FontWeight="Light" Text="Ingredients" Margin="0,0,0,16"/>
<TextBlock FontSize="16" FontWeight="Light" TextWrapping="Wrap" Text="{Binding Ingredients, Converter={StaticResource ListConverter}}" />
</StackPanel>
</StackPanel>
</ScrollViewer>
</UserControl>
</DataTemplate>
</FlipView.ItemTemplate>
As you can see, for each FlipView, a different display state is referenced. I'd recommend checking out that hands-on lab for a more specific look at your situation, or this other sample that includes both HTML and XAML examples of the FlipView control:
http://code.msdn.microsoft.com/windowsapps/FlipView-control-sample-18e434b4
In your scenario I would navigate to a different page when I detected the change to snapped and load a page that has a snap optimized experience rather than trying to dynamically update the layout of a complex page.