I have a App.xaml template :
<Application.Resources>
<!-- template for recent history -->
<DataTemplate x:Key="ListViewModelTemplate"> <!-- for recent recepies-->
<Grid Width="400" Height="80" VerticalAlignment="Center">
<StackPanel Orientation="Vertical">
<Border CornerRadius="0" x:Name="brdTesat" BorderBrush="Black" BorderThickness="1" Width="80" Height="80">
<Border.Background>
<ImageBrush x:Name="backgroundImaageBrush" Stretch="Fill">
<ImageBrush.ImageSource>
<BitmapImage x:Name="bmapBackground" UriSource="{Binding imageUriPath}" >
</BitmapImage>
</ImageBrush.ImageSource>
</ImageBrush>
</Border.Background>
</Border>
<StackPanel>
<TextBlock TextAlignment="Left" Margin="7,4,4,4" Text="{Binding title}" TextWrapping="Wrap"></TextBlock>
<TextBlock TextAlignment="Left" Margin="7,4,4,4" Text="{Binding subTitle}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
and try to call it to display in a ListBox.. The problem is that the listbox although bound to data, doesn't know how to work with the template. Here is my listbox definition :
<ListBox x:Name="recepiesList" ItemsSource="{Binding recepiesList}" ItemTemplate="{StaticResource ListViewModelTemplate}" >
if i define a template in place, like
<ListBox.Template><DataTemplate><TextBlock text={Binding title} /></DataTemplate></ListBox.Template>
the listbox works great, but i need to correct my Application.Resources one. How can i do so?
Here is the correct DataTemplate
<DataTemplate x:Key="ListViewModelTemplate"> <!-- for recent recepies-->
<!-- for recent recepies-->
<StackPanel Orientation="Horizontal">
<Border CornerRadius="0" x:Name="brdTesat" BorderBrush="White" BorderThickness="1" Width="80" Height="80">
<Border.Background>
<ImageBrush x:Name="backgroundImaageBrush" Stretch="Fill">
<ImageBrush.ImageSource >
<BitmapImage x:Name="bmapBackground" UriSource="{Binding imageUriPath}" >
</BitmapImage>
</ImageBrush.ImageSource>
</ImageBrush>
</Border.Background>
</Border>
<StackPanel >
<TextBlock TextAlignment="Left" Margin="7,4,4,4" Text="{Binding title}" TextWrapping="Wrap"></TextBlock>
<TextBlock TextAlignment="Left" Margin="7,4,4,4" Text="{Binding subTitle}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
</StackPanel>
</DataTemplate>
The Grid seemed to produce a problem..
Related
I have listbox control with custom data template. I get the collection from webservice and bind that collection to listbox. When i scroll the list box top to bottom my listbox rows are changed and text are concatenate.
Please see the below images
This is my first screen
when scroll top to bottom once again
please compare two images my rows are changed
<Grid Margin="30,20,0,20" x:Name="MeGrid" Loaded="MeGrid_Loaded" Visibility="{Binding Path=_isMyMessage, Converter={StaticResource BoolToVisibilityConverter}}">
<StackPanel >
<TextBlock HorizontalAlignment="Right" Foreground="#00c0d4" Margin="0,0,100,0" Text="{Binding Path=CreatedDate, Converter={StaticResource TimeSinceConverter}}" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Grid Background="#ffffff" Height="auto" Width="auto" MaxWidth="300" MinWidth="50">
<StackPanel Background="White">
<RichTextBox Name="MeRich" Background="White" MaxHeight="600" Foreground="Red"
FontFamily="Segoe UI" Margin="10,0,10,0" VerticalAlignment="Center"
TextWrapping="Wrap" Height="auto"
Width="auto" MinWidth="50"
MaxWidth="300"
local:Properties.Html="{Binding Path=MessageText}">
</RichTextBox>
<readMore:Readmore Source="{Binding Path=MessageText}" Visibility="{Binding ActualHeight,
ElementName=MeRich, Converter={StaticResource ReadMoreVisibilityConverter}}" ></readMore:Readmore>
<!--<TextBlock Margin="10,0,10,0" VerticalAlignment="Center" Foreground="Black" TextWrapping="Wrap" Height="auto" Width="auto" MinWidth="50" MaxWidth="300" Text="{Binding Path=MessageText}"
/>-->
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemsSource="{Binding Path=AttachmentList}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,5,0,5">
<Button Click="Image_Download" Loaded="Button_Loaded" Tag="{Binding .}" Width="80" Height="80" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<ContentControl Content="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</Button.Template>
<Image Source="/Resources/Drawable/c_image.png" Tag="{Binding .}" />
</Button>
<ProgressBar VerticalAlignment="Bottom" IsIndeterminate="true" Visibility="Collapsed" Style="{StaticResource CustomIndeterminateProgressBar}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
<Rectangle Margin="20,0,0,0" VerticalAlignment="Top" RadiusX="50" RadiusY="50" Width="80" Height="80">
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding Path=UserPictureURL}"/>
</Rectangle.Fill>
</Rectangle>
</StackPanel>
</StackPanel>
</Grid>
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 have a Windows Phone 8 project using C#. I created a DataTemplate in my App.xaml file as a resource. I then set the HeaderTemplate property for my PanoramaItem object for that page to use that DataTemplate as a static resource. When I run the app nothing displays in the area reserved for the Header. However, the same XAML code block that I turned into a DataTemplate works fine when it is inline on the page that contains the PanoramaItem object. Why is this happening and how can I fix this?
Here's the original inline XAML code for the PanoramaItem detail page:
<phone:Panorama x:Name="PanoramaMilitaryRobots_DetailVideos" Grid.Row="2" Foreground="{StaticResource CustomApplicationTextBrush}" Background="{StaticResource CustomApplicationBackgroundImage}" SelectionChanged="panoramaMilitaryRobots_DetailVideos_SelectionChanged">
<phone:Panorama.Title>
<StackPanel Orientation="Horizontal" Margin="0,15,0,0">
<Image Height="85" Width="85" Source="http://appstudiodata.blob.core.windows.net/apps/1383/db936107-bce6-41a2-9d95-1d342f66c6bb/res/Logo-b3883645-a6cd-4cc8-82be-97c87a266656.png" Stretch="Uniform" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="5,0,10,5" RenderTransformOrigin="0.5,0.5" />
<TextBlock FontSize="92" Text="Robot Videos" FontFamily="Segoe WP Light" Foreground="{StaticResource CustomTitleApplicationTextBrush}" VerticalAlignment="Stretch"/>
</StackPanel>
</phone:Panorama.Title>
<phone:PanoramaItem x:Name="PanoramaMilitaryRobots_DetailVideos0" Margin="0,0,0,25" >
<phone:PanoramaItem.Header>
<StackPanel Orientation="Horizontal" Margin="0,7,0,0">
<TextBlock Text="{Binding CurrentYouTubeVideo.Title, Converter={StaticResource SanitizeString}}" Foreground="{StaticResource CustomApplicationTextBrush}" FontSize="36" TextWrapping="Wrap" Width="420" Height="240"/>
</StackPanel>
</phone:PanoramaItem.Header>
<ctl:FlipControl NextElementCommand="{Binding NextpanoramaMilitaryRobots_DetailVideos0}" PreviousElementCommand="{Binding PreviouspanoramaMilitaryRobots_DetailVideos0}" ShowPreviousButton="{Binding HasPreviouspanoramaMilitaryRobots_DetailVideos0}" ShowNextButton="{Binding HasNextpanoramaMilitaryRobots_DetailVideos0}">
<ctl:FlipControl.InnerContent>
<Grid Margin="10,5,5,5">
<ScrollViewer>
<ctl:YouTubePlayer Margin="0,10" MaxHeight="250" VerticalAlignment="Top" VideoId="{Binding CurrentYouTubeVideo.VideoId, TargetNullValue={StaticResource DefaultNoImageValue}}"/>
</ScrollViewer>
</Grid>
</ctl:FlipControl.InnerContent>
</ctl:FlipControl>
</phone:PanoramaItem>
</phone:Panorama>
Here is the XAML code for the DataTemplate I created in the ApplicationResources section of my App.xaml file:
<DataTemplate x:Key="PanoramaItemHeaderTemplate">
<StackPanel Orientation="Horizontal" Margin="0,7,0,0">
<TextBlock Text="{Binding CurrentYouTubeVideo.Title, Converter={StaticResource SanitizeString}}" Foreground="{StaticResource CustomApplicationTextBrush}" FontSize="36" TextWrapping="Wrap" Width="420" Height="240"/>
</StackPanel>
</DataTemplate>
Here is the new XAML code for the PanoramaItem that is now set to use the DataTemplate:
<phone:Panorama x:Name="PanoramaMilitaryRobots_DetailVideos" Grid.Row="2" Foreground="{StaticResource CustomApplicationTextBrush}" Background="{StaticResource CustomApplicationBackgroundImage}" SelectionChanged="panoramaMilitaryRobots_DetailVideos_SelectionChanged">
<phone:Panorama.Title>
<StackPanel Orientation="Horizontal" Margin="0,15,0,0">
<Image Height="85" Width="85" Source="http://appstudiodata.blob.core.windows.net/apps/1383/db936107-bce6-41a2-9d95-1d342f66c6bb/res/Logo-b3883645-a6cd-4cc8-82be-97c87a266656.png" Stretch="Uniform" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="5,0,10,5" RenderTransformOrigin="0.5,0.5" />
<TextBlock FontSize="92" Text="Robot Videos" FontFamily="Segoe WP Light" Foreground="{StaticResource CustomTitleApplicationTextBrush}" VerticalAlignment="Stretch"/>
</StackPanel>
</phone:Panorama.Title>
<phone:PanoramaItem x:Name="PanoramaMilitaryRobots_DetailVideos0" Margin="0,0,0,25" HeaderTemplate="{StaticResource PanoramaItemHeaderTemplate}">
<ctl:FlipControl NextElementCommand="{Binding NextpanoramaMilitaryRobots_DetailVideos0}" PreviousElementCommand="{Binding PreviouspanoramaMilitaryRobots_DetailVideos0}" ShowPreviousButton="{Binding HasPreviouspanoramaMilitaryRobots_DetailVideos0}" ShowNextButton="{Binding HasNextpanoramaMilitaryRobots_DetailVideos0}">
<ctl:FlipControl.InnerContent>
<Grid Margin="10,5,5,5">
<ScrollViewer>
<ctl:YouTubePlayer Margin="0,10" MaxHeight="250" VerticalAlignment="Top" VideoId="{Binding CurrentYouTubeVideo.VideoId, TargetNullValue={StaticResource DefaultNoImageValue}}"/>
</ScrollViewer>
</Grid>
</ctl:FlipControl.InnerContent>
</ctl:FlipControl>
</phone:PanoramaItem>
</phone:Panorama>
I have the following problem:
<DataTemplate x:Key="OrganisationsItemTemplate">
<StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
<Button Command="{Binding Path=DataContext.LoadSpacesCommand, ElementName=OrganisationList}" CommandParameter="{Binding}" Padding="-5,0,-5,-5" Margin="-7,-12,-7,-7" Height="auto" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
<Grid Margin="0,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Background="Transparent">
<Border Background="White" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding image.thumbnail_link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Center" Background="Transparent">
<!--<TextBlock Text="{Binding name}" HorizontalAlignment="Left" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" />-->
<phone:LongListSelector x:Name="SpacesList"
Background="Transparent"
ItemTemplate="{StaticResource SpacesTemplate }"
ItemsSource="{Binding spaces}"
Margin="40,0,0,96"
LayoutMode="List"
HideEmptyGroups="True"
IsGroupingEnabled="False" VerticalContentAlignment="Top">
</phone:LongListSelector>
</StackPanel>
</Grid>
</Button>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="SpacesTemplate">
<Border Background="Transparent" Padding="5,0,0,5">
<Border Background="{StaticResource PhoneAccentBrush}" BorderBrush="{StaticResource PhoneAccentBrush}" BorderThickness="2" Width="62"
Height="62" Margin="0,0,18,0" HorizontalAlignment="Left">
<TextBlock Text="{Binding name}" Foreground="{StaticResource PhoneForegroundBrush}" FontSize="48" Padding="6"
FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Border>
</Border>
</DataTemplate>
In my data template I am placing LongListselector... which also needs a template. but the SpacesTemplate that is defined outside the current datatemplate cannot be seen. any ideas how to reference the datatemplate "SpacesTemplate" from within the datatemplate "OrganisationsItemTemplate"
Xaml is read top down, if you want to use SpacesTemplate inside OrganisationsItemTemplate you will have to put SpacesTemplate before OrganisationsItemTemplate in the Xaml
I have wrote some class, named as Employe. Employees collection I set as source for ListBox WPF control. I have wrote such template for ItemTemplate:
<ResourceDictionary>
<DataTemplate x:Key="tmpEmploye">
<Border BorderThickness="3" BorderBrush="Gray" CornerRadius="5"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Surname}"
HorizontalAlignment="Stretch" Margin="2"
FontWeight="Bold" TextWrapping="Wrap"/>
<TextBlock Text="{Binding Path=Name}"
HorizontalAlignment="Stretch" Margin="2"/>
<TextBlock Text="{Binding Path=Patronymic}"
HorizontalAlignment="Stretch" Margin="2"
TextWrapping="Wrap"/>
</StackPanel>
<TextBlock Text="{Binding Path=Post}" Foreground="Gray"
HorizontalAlignment="Stretch" Margin="2"
FontStyle="Italic" TextWrapping="Wrap"/>
</StackPanel>
</Border>
</DataTemplate>
</ResourceDictionary>
Each item has border. The border must be expanded according width of ListBox. I set HorizontalAlignment="Stretch" for Border, but it is not occured as I want.
How can I correct it?
Try this:
<ListBox Name="lbEmployees" ItemTemplate="{StaticResource tmpEmploye}"
HorizontalContentAlignment="Stretch"
/>