I have a long list seector that shows an image, two textblocks (name and description and other image to share the item. The problem is that the description and the usually are larger than the size of the piece of grid where they are so I can show only the beginning. What I want is scroll automatically the text of the textblocks to the left using an animation to show it completely. Is this posible?
The code of my xaml project is this.
<phone:LongListSelector x:Name="GaleryLongListSelector" SelectionChanged="GaleryLongListSelector_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="100" toolkit:TiltEffect.IsTiltEnabled="True" Grid.Column="0">
<Image Width="80" RenderTransformOrigin="0.5,0.5" Height="80" Source="{Binding ThumbImage}" Margin="5,0">
<Image.RenderTransform>
<RotateTransform Angle="90"/>
</Image.RenderTransform>
</Image>
<StackPanel Orientation="Vertical">
<TextBlock x:Name="txtProjectName" Text="{Binding Name}" Margin="5,10,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" />
<TextBlock x:Name="txtProjectDescript" Text="Aqui iria una descripcion muy larga del faldksjfjkldjfkldajsfkljaslfkjasldfjlasdjfkl" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" />
</StackPanel>
</StackPanel>
<Image Source="/Images/share.png" Width="80" Tap="Image_Tap" Grid.Column="1" HorizontalAlignment="Right"/>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu IsZoomEnabled="True" x:Name="ContextMenu" >
<toolkit:MenuItem Header="{Binding Source={StaticResource LocalizedStrings}, Path=LocalizedResources.MainPagePanoramaItemGalleryContextMenuDelete}" Click="Delete_Click"/>
<toolkit:MenuItem Header="{Binding Source={StaticResource LocalizedStrings}, Path=LocalizedResources.MainPagePanoramaItemGalleryContextMenuRename}" Click="Rename_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Grid>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
Any help is appreciated.
What I meant in my comment is, have you tried using this :
<ScrollViewer>
<TextBlock Text="Mon texte de test" />
</ScrollViewer>
If your text is too long, it should make it scrollable.
Then you just have to create your animation, to automatically scroll it
EDIT
Just wrap the description TextBlock in an ScrollViewer and set the HorizontalScrollBarVisibility to auto.
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<TextBlock x:Name="txtProjectDescipt" .../>
</ScrollViewer>
Related
This is a general question and I am looking for a workaround.
Is there a way to create a TextBox item inside a PanoramaItem?
This is my PanoramaItem:
<phone:PanoramaItem x:Name="Panorama2" Header="Ringtones">
<!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
<phone:LongListSelector Margin="0,-38,0,100" ItemsSource="{Binding Items2}" Tap="LongListSelector_Tap">
<phone:LongListSelector.ListHeaderTemplate>
<DataTemplate>
<Grid Margin="12,0,0,38">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
</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>
This is how the PanoramaItem looks like:
I want to add a TextBox where indicated in the picture. Is it possible? If yes how? I have looked in most of the options of PanoramaItems and couldn't find TextBox item.
Try this xaml, i think you need to achieve this
<phone:PanoramaItem x:Name="Panorama2" Header="Ringtones" Margin="0,72,0,0">
<!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
<StackPanel>
<phone:LongListSelector Height="362" Margin="0,-38,0,100" ItemsSource="{Binding Items2}" Tap="LongListSelector_Tap">
<phone:LongListSelector.ListHeaderTemplate>
<DataTemplate>
<Grid Margin="12,0,0,38">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
</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>
<TextBox Text="sfg"/>
</StackPanel>
</phone:PanoramaItem>
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
I'm trying to get the index of a ListBoxItem in WP8.... And this is my XAML code
<phone:PivotItem Header="Pins">
<!-- Content Panel -->
<Grid x:Name="ContentPanel2" HorizontalAlignment="Left" Height="583" Margin="10,10,0,0" Grid.Row="1" VerticalAlignment="Top" Width="460">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400*"/>
<ColumnDefinition Width="0*"/>
<ColumnDefinition Width="87*"/>
</Grid.ColumnDefinitions>
<ListBox x:Name="lstData2"
ItemsSource="{Binding DataCollection2, Source={StaticResource PinsCollection}}" Grid.ColumnSpan="3" Foreground="#FF1D53D0" Height="583" VerticalAlignment="Bottom">
<ListBox.ItemTemplate >
<DataTemplate >
<StackPanel Orientation="Horizontal" Tap="StackPanel_Tap" MouseLeftButtonDown ="SetIndex" Tag="{Binding pinId}">
<Image Margin="8"
VerticalAlignment="Top"
Source="{Binding ImageUri}"
Width="100"
Height="100" />
<StackPanel Height="93" Width="259" >
<TextBlock Margin="8"
Width="250"
TextWrapping="Wrap"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Foreground="#FF1D53D0"
Text="{Binding Pinnedname}" Height="33" RenderTransformOrigin="0.5,0.5" FontFamily="Segoe WP SemiLight" FontSize="24" FontWeight="Bold" />
<TextBlock Width="155"
Margin="8,0,8,8"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Text="{Binding Status}" Foreground="#FF1D53D0" FontFamily="Segoe WP SemiLight" />
</StackPanel>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="Remove Pin" Click="RemovePin_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<!-- End of Content Panel -->
</Grid>
</phone:PivotItem>
I want to get the index in the SetIndex event handler in the MouseLeftButtonDown!
You should use a two-way binding for that:
<ListBox x:Name="lstData2" SelectedIndex="{Binding Index,Mode=TwoWay}"
There's generally no need to add click handlers for ListBox, as most basic click functionality is built into the control.
In my app I'm having a ListBox that I have already set it's ItemTemplate, and it's working just fine. But after facing some problems I decided to change the ListBox into an ItemsControl,
So I just changed the ListBox keyword with ItemsControl, (whitch I don't know if it's allowed). But when I run the app an InvalidCastExeption is unhandeled at the InitializeComponent.
I am still new to programming so can anyone help me with this?
EDIT:
<ListBox Name="ChannelsSearchResaultList" Visibility="Collapsed" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Name="ChannelContainer" Margin="5" Width="470"
HorizontalAlignment="Stretch" BorderBrush="BlueViolet"
BorderThickness="2" Background="#FF1D1D1D" MouseLeftButtonDown=
"Border_MouseLeftButtonDown" MouseLeftButtonUp=
"ChannelContainer_MouseLeftButtonUp">
<Grid Height="110">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="340"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding Logo}" Margin="5"/>
<TextBlock Text="{Binding Duration}" Margin="10,5"
VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
<Canvas Grid.Column="1" >
<TextBlock Text="{Binding Title}" FontWeight="Bold"
Foreground="Red"/>
<TextBlock Text="{Binding Views}" Canvas.Top="60"
Canvas.Left="20" />
</Canvas>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I have a grid with 4 columns. In the first column is a Canvas with a ZIndex of 99 and inside that is an expander. The expand direction is set to RIGHT. When I click on the header, the expander expands OVER TOP of column 2...which is exactly what I want. I'm trying to replicate this (only the opposite direction) inside column 4, so that when expanded, it will show over column 3. Even though I've marked the ExpandDirection of the second expander to "Left", it still expands to the right, and off the screen.
Here is the working expander:
<Canvas Grid.Column="0" Panel.ZIndex="99" Grid.RowSpan="4" VerticalAlignment="Stretch" Margin="0,5">
<Expander ExpandDirection="Right" Style="{DynamicResource OptionsExpanderStyle}" VerticalAlignment="Stretch" Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}">
<Border BorderBrush="Black" BorderThickness="0,0,2,0">
<Grid Background="White">
</Grid>
</Border>
</Expander>
</Canvas>
Here is the broken expander:
<Canvas x:Name="rightCanvas" Panel.ZIndex="99" Grid.RowSpan="4" Grid.Column="3" Margin="0,5">
<Expander ExpandDirection="Left" Style="{DynamicResource OptionsExpanderStyle}" HorizontalAlignment="Right" VerticalAlignment="Stretch" Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}">
<Border BorderBrush="Black" BorderThickness="2,0,0,0">
<Grid Background="White" Width="150">
</Grid>
</Border>
</Expander>
</Canvas>
Do not use canvas.
Try something like that:
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Background="LightBlue"
TextAlignment="Center" Text="Left Column"/>
<TextBlock Grid.Column="1" Background="LightCoral"
TextAlignment="Center" Text="Right Column"/>
</Grid>
<Expander Background="LightGray" ExpandDirection="Right"
Header="LeftMenu" VerticalAlignment="Top" HorizontalAlignment="Left">
<StackPanel Width="200">
<TextBlock Text="Some menu stuff"/>
<TextBlock Text="Some more"/>
</StackPanel>
</Expander>
<Expander Background="LightGray" ExpandDirection="Left"
Header="RightMenu" VerticalAlignment="Top" HorizontalAlignment="Right">
<StackPanel Width="200" >
<TextBlock Text="Some menu stuff"/>
<TextBlock Text="Some more"/>
</StackPanel>
</Expander>
</Grid>