We Keep Coding

Is there any way to show elements from a listview one by one and scroll through them?

Currently in my calendar section, i get events from google calendar, and the items are show like this.
what I want is show this elements, one by one and adjust the height so its fits the element content which you are seeing and then scroll through the list to see the others elements.
And everytime you scroll down the listview is going to readjust the height to fit the new element.
Something like this
Then you scroll
But i dont know who to do this, if i bind the height to the wrapper of the element in the datatemplate just ignore the bind. And you can scroll through the elements without select them, so i cant modify the template for selected items, or bind with the selected item.
Searching i have found some ways to modify the item height to the parent height, but that's not what i want, is the opposite.
my xaml
<ListView Background="Transparent"
x:Name="DatosEvento"
Margin="5"
MinWidth="{Binding ActualWidth, ElementName=Calendar}"
Height="250"
ItemsSource="{Binding Path=Eventos}">
<ListView.ItemTemplate>
<DataTemplate>
<WrapPanel Width="350" Orientation="Horizontal">
<StackPanel Margin="2">
<Border BorderThickness="1" Background="CornflowerBlue" BorderBrush="Black">
<TextBlock Text="Nombre Organizador" Background="Gray"/>
</Border>
<TextBlock Text="{Binding Path=Organizer.DisplayName}"/>
</StackPanel>
<StackPanel Margin="2">
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="Correo Organizador" Background="Gray"/>
</Border>
<TextBlock Text="{Binding Path=Organizer.Email}"/>
</StackPanel>
<StackPanel Margin="2">
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="Nombre Evento" Background="Gray"/>
</Border>
<TextBlock Text="{Binding Path=Summary}"/>
</StackPanel>
<StackPanel Margin="2">
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="Estado" Background="Gray"/>
</Border>
<TextBlock Text="{Binding Path=Status}"/>
</StackPanel>
<StackPanel Margin="2">
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="Fecha Inicio dd/mm/yyyy" Background="Gray"/>
</Border>
<TextBlock Text="{Binding Path=Start.DateTime}"/>
</StackPanel>
<StackPanel Margin="2">
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="Fecha actualización" Background="Gray"/>
</Border>
<TextBlock Text="{Binding Path=Updated, ConverterCulture={x:Static SystemGlobalization:CultureInfo.DefaultThreadCurrentCulture}}"/>
</StackPanel>
<StackPanel Margin="2">
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="Fecha Fin dd/mm/yyyy" Background="Gray"/>
</Border>
<TextBlock Text="{Binding Path=End.DateTime}"/>
</StackPanel>
<StackPanel Margin="2">
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="Enlace" Background="Gray"/>
</Border>
<TextBlock Text="{Binding Path=HtmlLink}" Foreground="Blue" TextDecorations="Underline" MouseDown="TextBlockHiperLink_MouseDown" Cursor="Hand"/>
</StackPanel>
<Line X1="10" X2="300" Margin="5" Stroke="Black" StrokeThickness="2"/>
</WrapPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Simple template:
<ListView SelectedIndex="0">
<ListView.Template>
<ControlTemplate TargetType="ListView">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentControl HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
ContentTemplate="{TemplateBinding ItemTemplate}"
Content="{TemplateBinding SelectedItem}" />
<ScrollBar Minimum="0"
Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=SelectedIndex,Mode=TwoWay}"
Maximum="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=Items.Count,Converter={StaticResource ResourceKey=ToRealCount}}"
Grid.Column="1"
ViewportSize="0.5" />
</Grid>
</ControlTemplate>
</ListView.Template>
<ListView.Items>
<Rectangle Fill="Violet"
Width="100"
Height="100" />
<Rectangle Fill="Aqua"
Width="100"
Height="100" />
<Rectangle Fill="Green"
Width="100"
Height="100" />
<Rectangle Fill="Red"
Width="100"
Height="100" />
</ListView.Items>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListView>
Converter :
public class ToRealCount : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is int count)
{
return count > 0 ? count - 1 : count;
}
return 0;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
you might consider looking into this too flipview

I ended using a combobox instead of a list, because i dont want to use something hacky that could end doing weird things and flipview didnt work as intended so is actually the best.
As i have to wait anyway if someone gives a better solution would be very nice.

I dont understand xaml alignment

So I struggle with the XAML alignment a bit and I hoped for someone who could help me get trough it.
This is the Code. I will break it down below:
<Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="0">
<StackPanel>
<Button Style="{StaticResource AppBarButtonStyle}" Click="ShowPopupOffsetClicked"/>
<Image Source="Assets/images/icon_thumbnail.png"></Image>
</StackPanel>
<Popup VerticalOffset="60" HorizontalOffset="0" x:Name="StandardPopup">
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="300" Height="350">
<StackPanel >
<TextBlock>
<Run x:Name="MyRun" Text=""/>
</TextBlock>
<StackPanel Orientation="Horizontal">
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBox x:Name="searchTextBox" Width="200" Height="30" />
</StackPanel>
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Top">
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
<Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</StackPanel>
</Border>
</Popup>
</Grid>
This part will be MyRun Text later:
<TextBlock>
<Run x:Name="MyRun" Text=""/>
</TextBlock>
This part is the SearchBar and the search-button which should be perfectly in line. How do I do this?
<StackPanel Orientation="Horizontal">
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBox x:Name="searchTextBox" Width="200" Height="30" />
</StackPanel>
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Top">
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
</StackPanel>
This is the next and previous button. It should be perfectly in line with MyRun. How would I do that?
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
And at last will be the "Close" Button. I guess it is kinda already perfect?:
<Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
Now a screenshot of how it Looks like and how I want it to look:
This is how it is:
This is how I want it to be:
I know that I can Change the height of the popup. But when I Change the height some Things disappear (for example the close Botton won't be visible because it is too far down while the popup height is too low).
Sorry for the long post. I hope someone can help me out here.

You should be able to use a Grid with three RowDefinitions. Something like this:
<Popup VerticalOffset="60" HorizontalOffset="0" x:Name="StandardPopup">
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="300" Height="350">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- row 1 -->
<StackPanel Orientation="Horizontal">
<TextBox x:Name="searchTextBox" Width="200" Height="30" Margin="0,0,3,0" />
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
<!-- row 2 -->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
<TextBlock Grid.Column="1" HorizontalAlignment="Center">
<Run x:Name="MyRun" Text=""/>
</TextBlock>
</Grid>
<!-- row 3 -->
<Button Grid.Row="2"
Content="Close" Click="ClosePopupClicked"
HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</Grid>
</Border>
</Popup>
You can adjust the space between the controls using the Margin property.

Wrap Panel Items Separator WPF

I have this expander control with WrapPanel in it:
<Expander Background="Black">
<Expander.Header>
<BulletDecorator>
<BulletDecorator.Bullet>
<Image Source="../Images/Button/customiseButton_Transparent.png" Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />
</BulletDecorator.Bullet>
<TextBlock Margin="10,0,0,0" Text="Customize" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
</BulletDecorator>
</Expander.Header>
<WrapPanel>
<StackPanel Orientation="Horizontal">
<Image Source="Images/Button.png" />
<Label Content="Phone" Foreground="Snow" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Image Source="Images/Button.png" />
<Label Content="Colour" Foreground="Snow" VerticalAlignment="Center"/>
</StackPanel>
</WrapPanel>
</Expander>
I need a to display a white separator between the two stack panels.
I have tried adding the <Seperator/> tag, but it does not work

A Separator is nothing more than a Border element really so this should work just fine:
<WrapPanel>
<StackPanel Orientation="Horizontal">
<Image Source="Images/Button.png" />
<Label Content="Phone" Foreground="Snow" VerticalAlignment="Center"/>
</StackPanel>
<Border Width="2" Background="Red" />
<StackPanel Orientation="Horizontal">
<Image Source="Images/Button.png" />
<Label Content="Colour" Foreground="Snow" VerticalAlignment="Center"/>
</StackPanel>
</WrapPanel>
Just change the Width and Background properties of the Border according to your requirements.
The actual Separator element always has a Height of 1 on Windows 10 unless you modify its ControlTemplate.

Use this Tag:
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />

Modifying XAML TextBox from another class

In my MainPage PanoramaItem2 I have a TextBlock. How can I set the text of the TextBlock from another class?
I tried creating an instance of the MainPage and then finding the TextBlock but I couldn't find it. It is not in there.
This is the way I tried:
public async Task<Problem> DownloadFileFromWeb(Uri uriToDownload, string fileName, CancellationToken cToken)
{
var MainText = new MainPage();
//Set text here;
//MainText.Panorama2.DLText.Text = "New text";
}
This is my MainPage's xaml:
<phone:PhoneApplicationPage
x:Class="PanoramaApp2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="False">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!-- LOCALIZATION NOTE:
To localize the displayed strings copy their values to appropriately named
keys in the app's neutral language resource file (AppResources.resx) then
replace the hard-coded text value between the attributes' quotation marks
with the binding clause whose path points to that string name.
For example:
Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"
This binding points to the template's string resource named "ApplicationTitle".
Adding supported languages in the Project Properties tab will create a
new resx file per language that can carry the translated values of your
UI strings. The binding in these examples will cause the value of the
attributes to be drawn from the .resx file that matches the
CurrentUICulture of the app at run time.
-->
<!--Panorama control-->
<phone:Panorama Title="my application">
<phone:Panorama.Background>
<ImageBrush ImageSource="/PanoramaApp2;component/Assets/PanoramaBackground.png"/>
</phone:Panorama.Background>
<!--Panorama item one-->
<phone:PanoramaItem x:Name="Panorama1" Header="first item">
<!--Single line list with text wrapping-->
<phone:LongListSelector Margin="0,0,-22,0" ItemsSource="{Binding Items}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,-6,0,12">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem x:Name="Panorama2" Header="Songs">
<!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
<phone:LongListSelector Margin="0,-38,-22,2" ItemsSource="{Binding Items}" Tap="LongListSelector_Tap">
<phone:LongListSelector.ListHeaderTemplate>
<DataTemplate>
<Grid Margin="12,0,0,38">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Name="DLText" Text="{Binding StatusText, Mode = TwoWay}"
Style="{StaticResource PanoramaItemHeaderTextStyle}"
Grid.Row="0"/>
</Grid>
</DataTemplate>
</phone:LongListSelector.ListHeaderTemplate>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432">
<StackPanel Width="311" Margin="8,-7,0,0">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}" />
</StackPanel>
<Image Source="{Binding PlayPhoto}" Width="50" Height="50" HorizontalAlignment="Left" Tap="Image_Tap_1"/>
<Image Source="{Binding DownloadPhoto}" Width="40" Height="40" HorizontalAlignment="Right" Tap="Image_Tap"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PanoramaItem>
<!--Panorama item three-->
<phone:PanoramaItem Header="third item" Orientation="Horizontal">
<!--Double wide Panorama with large image placeholders-->
<Grid>
<StackPanel Margin="0,4,16,0" Orientation="Vertical" VerticalAlignment="Top">
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
</StackPanel>
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="0,12,0,0">
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
</StackPanel>
</StackPanel>
</Grid>
</phone:PanoramaItem>
</phone:Panorama>
<!--Uncomment to see an alignment grid to help ensure your controls are
aligned on common boundaries. The image has a top margin of -32px to
account for the System Tray. Set this to 0 (or remove the margin altogether)
if the System Tray is hidden.
Before shipping remove this XAML and the image itself.-->
<!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
</Grid>
What am I missing here?
I am on WP8.1

You won't be able to modify the text that way anyway, because it's inside a template. You should use a binding to set the text:
<TextBlock Name="DLText" Text="{Binding StatusText,Mode=TwoWay}"
Style="{StaticResource PanoramaItemHeaderTextStyle}"
Grid.Row="0"/>
Add the "StatusText" property to the same view-model that contains "Items".
Then it's just a matter of updating the view-model property. If "MainPage" is in the current frame, then you could use something like the following:
// WinRT
// var frame = (Frame)Windows.UI.Xaml.Window.Current.Content;
// var page = (MainPage)frame.Content;
// Silverlight
var page = (MainPage)Application.Current.RootVisual;
var viewmodel = (MyViewModel)page.DataContext;
viewmodel.StatusText = "new text";

How to define the Location of a Popup to be different from the Button Location in a ListView? XAML C# WPF

I have a ListView of ToggleButtons. Every button is binded to a Popup window.
Every Popup window is being opened at the same place as the button, but I want it to be at the same place as the first button.
Here is the code and images:
The buttons:
This is what happens when the first button is open:
This is what happens when the second button is open:
<ListView x:Name="ListOfRecipes" HorizontalAlignment="Center" VerticalAlignment="Top" ItemsSource="{Binding}" Grid.Row="1" Margin="25,0.333,25,35" ScrollViewer.VerticalScrollMode="Enabled" Grid.RowSpan="5" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="90*" />
<RowDefinition Height="150*" />
<RowDefinition Height="0*" />
</Grid.RowDefinitions>
<ToggleButton x:Name="RecipeButton" Grid.Row="1" BorderBrush="#FF65C365" VerticalAlignment="Center" HorizontalAlignment="Center" Click="Button_Click" Height="150" Width="328" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Height="128" Width="328">
<Image Source="{Binding Path=ImageUri}" Height="128" Width="128" Margin="0,6,0,-5.667" />
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top" Height="128" Width="192">
<TextBlock Height="25" Width="190" Foreground="#FF6FDC13" Text="{Binding Name}" VerticalAlignment="Top" />
<Image Name="YesOrNoImage" Source="{Binding Path=YesOrNoImage}" Width="102" Height="102" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</StackPanel>
</StackPanel>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=RecipeButton, Mode=TwoWay}" Height="0" Width="328" VerticalAlignment="Center" Name="PopupOne" IsLightDismissEnabled="True" IsHoldingEnabled="False" ScrollViewer.VerticalScrollMode="Enabled" Visibility="{Binding IsChecked, ElementName=RecipeButton}">
<Border BorderBrush="#FF65C365" BorderThickness="1" Background="White" Height="514" Width="328">
<ScrollViewer VerticalScrollMode="Enabled" >
<StackPanel Orientation="Vertical" ScrollViewer.VerticalScrollMode="Enabled">
<Image Source="{Binding Path=ImageUri}" Height="328" Width="328" />
<TextBlock Foreground="#FF6FDC13" Text="{Binding Name}" HorizontalAlignment="Left" FontSize="28" />
<TextBlock Foreground="Black" Text="{Binding RecipeText}" HorizontalAlignment="Left" FontSize="18" />
</StackPanel>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

In the popup you can define a grid and set the popup height there
Something like this:
<Popup x:Name="resultsPopup"
AllowsTransparency="True"
IsOpen="{Binding IsResultsPopupOpen,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}"
Placement="Bottom"
PlacementTarget="{Binding ElementName=SearchBox}"
StaysOpen="False">
<Grid Width="{Binding ActualWidth,
ElementName=SearchBox}"
Height="300">
</Grid>
</Popup>
UPDATE:
You can place the popup wherever you want with the Placement property as shown above, the set the binding of the "PlacementTarget" to the control you want to bind.
In the example above the popup will be shown below the UI control named SearchBox