I wonder if someone can help me with the FlipView control in windows 8. I have an app that uses a FlipView . Everything was working fine until a recent windows 8 update, and now the FlipView flips 'twice' in certain circumstances.
Here is some example XAML that reproduces the error:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<FlipView >
<Grid Height="762" Background="#FF29AA29">
<TextBlock HorizontalAlignment="Center" Text="1" VerticalAlignment="Center"
Foreground="Black" FontSize="96"/>
</Grid>
<Grid Height="762" Background="#FF192780">
<TextBlock HorizontalAlignment="Center" Text="2" VerticalAlignment="Center"
Foreground="Black" FontSize="96"/>
</Grid>
<Grid Height="762" Background="Green">
<TextBlock HorizontalAlignment="Center" Text="3" VerticalAlignment="Center"
Foreground="Black" FontSize="96"/>
</Grid>
<Grid Height="762" Background="Orange">
<TextBlock HorizontalAlignment="Center" Text="4" VerticalAlignment="Center"
Foreground="Black" FontSize="96"/>
</Grid>
<Grid Height="762" Background="Blue">
<TextBlock HorizontalAlignment="Center" Text="5" VerticalAlignment="Center"
Foreground="Black" FontSize="96"/>
</Grid>
<Grid Height="762" Background="Red">
<TextBlock HorizontalAlignment="Center" Text="6" VerticalAlignment="Center"
Foreground="Black" FontSize="96"/>
</Grid>
<Grid Height="762" Background="Yellow">
<TextBlock HorizontalAlignment="Center" Text="7" VerticalAlignment="Center"
Foreground="Black" FontSize="96"/>
</Grid>
</FlipView>
</Grid>
As you can see its a very simple example with numbered grids inside the FlipView.
Now, if you click on the forward or back flip buttons (slightly greyed out buttons on left and right sides) WITHOUT moving the mouse to a different location (i.e. move the mouse over the forward button and click multiple times without moving the mouse again) it will flip 1,2,4,6,7 (see numbers in my xaml).
If however you move the mouse slightly between clicks you get the correct behaviour (1,2,3,4,5,6,7).
This error exists in both local machine and emulator mode.
It doesn't happen when you use the finger drag method in the emulator to flip.
Does anyone have any ideas about how to fix this ?
It turns out the Windows 8 update I downloaded screwed the driver for my touchpad, and the issue is purely driver related - very weird though
Related
I am trying to place a ScrollViewer around a TextBlock in XAML (here, the textblock is called ImageText). Here is my code:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="-20,0,-22,0">
<TextBlock x:Name="TextBlock1" HorizontalAlignment="Left" Margin="130,64,0,0" TextWrapping="Wrap" Text="Load the image here." VerticalAlignment="Top" Height="37" Width="555" FontSize="25"/>
<Button x:Name="LoadButton" Content="Load" HorizontalAlignment="Left" Margin="50,138,0,0" VerticalAlignment="Top" Height="87" Width="160" FontFamily="Global User Interface" Click="LoadButton_Click"/>
<Button x:Name="ExtractButton" Content="Extract" HorizontalAlignment="Left" Margin="240,138,0,0" VerticalAlignment="Top" Height="87" Width="160" FontFamily="Global User Interface" Click="ExtractButton_Click"/>
<Image x:Name="PreviewImage" HorizontalAlignment="Left" Height="296" Margin="76,292,0,0" VerticalAlignment="Top" Width="296"/>
<TextBlock x:Name="ExtractedTextBlock" HorizontalAlignment="Left" Margin="922,64,0,0" TextWrapping="Wrap" Text="Extracted Text:" VerticalAlignment="Top" FontSize="25" Width="173"/>
<ScrollViewer>
<TextBlock x:Name="ImageText" Margin ="922,100,0,0" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Text Not Extracted" VerticalAlignment="Top" Height="427" Width="380"/>
</ScrollViewer>
However, when I try to run the program, it for some reason none of the buttons work i.e. I cannot click them, and when I remove the ScrollViewer, everything works fine. What am I doing wrong? Thanks in advance.
You placed the Margin in the TextBlock instead of the ScrollViewer, change to the following:
<ScrollViewer Margin ="922,100,0,0" >
<TextBlock x:Name="ImageText" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Text Not Extracted" VerticalAlignment="Top" Height="427" Width="380"/>
</ScrollViewer>
And now will work. Anyway instead of doing this like you did I encourage you to use Grid.Rows and Columns or RelativePanel (Windows 10 Apps)
I have the following XAML code:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="#FFE8E8E8">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,0" >
<TextBlock x:Name="AppName" Text="Agent" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0" Foreground="Black" />
<TextBlock x:Name="PageName" Text="agent audit" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" Height="100" Foreground="Black"/>
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Background="White"/>
<ScrollViewer HorizontalAlignment="Left" Margin="0,0,0,0" Grid.Row="1" VerticalAlignment="Top">
<TextBlock x:Name="auditText" HorizontalAlignment="Left" Margin="0,0,0,0" Grid.Row="1" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Foreground="Black" Padding="10"/>
</ScrollViewer>
</Grid>
When the page comes into view I assign the TextBlock with the contents of an API Call (audit log text), and this gets quite long.
However, currently it cuts off all text below the screen height. I have the TextBlock and ScrollView set to Auto layout height/width.
I can even see the top of the next line of text, when I scroll the rest doesn't appear. Quite hard to screenshot too as you only see the issue when scrolling, and whilst scrolling I can't take a screenshot :/
Any ideas where I'm going wrong?
I've read numerous posts on this site but nothing quite hit what I was after.
Thanks.
This ended up working for me:
<ScrollViewer Height="Auto" Grid.Row="1">
<TextBlock x:Name="auditText" Text="TextBlock"
VerticalAlignment="Top" Foreground="Black" Margin="0,10,0,0" Grid.Row="1" Padding="20" TextWrapping="Wrap">
</TextBlock>
</ScrollViewer>
Setting the ScrollViewer height to AUTO
I have a LongListSelector control on a page in my Windows Phone 8 app. For this control I set a GroupHeaderTemplate and a ItemTemplate and both contain a TextBlock. If I align the TextBlock controls to center I have some weird behavior (maybe not weird but unexplainable to me at the moment). When I open the page on my phone the centered text moves ca. 5px to the right. The move is visible to the user (it's happening after the page is loaded). I tried to solve this problem but all margin changes (and other trials) did not change the behavior and my friend Google couldn't help me either. Can some explain to my why this is happening and how to solve this?
My code (simplified):
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
<phone:LongListSelector x:Name="longList" LayoutMode="List" HideEmptyGroups ="true" Margin="5,0,5,5" ItemsSource="{Binding List, Mode=OneWay}" IsGroupingEnabled="True" Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<phone:LongListSelector.Resources>
<DataTemplate x:Key="itemTemplate">
<Grid Margin="10,10,10,0" Background="#FFF3F1F1" HorizontalAlignment="Left">
<TextBlock x:Name="name" Margin="10" TextWrapping="NoWrap" Text="{Binding Name}" VerticalAlignment="Center" FontSize="40"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="groupHeaderTemplate">
<Grid Margin="10,10,10,0" Background="#FFF3F1F1" HorizontalAlignment="Center">
<TextBlock x:Name="name" Margin="10" TextWrapping="NoWrap" Text="test" VerticalAlignment="Center" FontSize="40"/>
</Grid>
</DataTemplate>
</phone:LongListSelector.Resources>
<!--<phone:LongListSelector.JumpListStyle>
<StaticResource ResourceKey="jumpListStyle"/>
</phone:LongListSelector.JumpListStyle>-->
<phone:LongListSelector.GroupHeaderTemplate>
<StaticResource ResourceKey="groupHeaderTemplate"/>
</phone:LongListSelector.GroupHeaderTemplate>
<phone:LongListSelector.ItemTemplate>
<StaticResource ResourceKey="itemTemplate"/>
</phone:LongListSelector.ItemTemplate>
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding SelectItemCommand}"
CommandParameter="{Binding SelectedItem, ElementName=longList}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</phone:LongListSelector>
</Grid>
Thanks in advance
I would like to change the background of my grid to white when you hover over or select it. I'd also like to change the color of the text inside at the same time to black. This is specific to one page only, so it would need to be applied with an XKey or something as a guess. The grid starts with a transparent background, also.
I'm really struggling to find the direction for this. Please let me know if you have any ideas or links!
Here's my code:
<GridView.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top" HorizontalAlignment="Left" Width="335" Height="152">
<StackPanel Orientation="Horizontal" Margin="2,2,2,2" VerticalAlignment="Top" HorizontalAlignment="Left">
<StackPanel Margin="13,0,13,0" Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Left">
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<TextBlock Style="{StaticResource SmallText}" Text="{Binding Town}" />
<TextBlock Style="{StaticResource SmallText}" Text=", "/>
<TextBlock Style="{StaticResource SmallText}" Text="{Binding State}"/>
<TextBlock Style="{StaticResource SmallText}" Text=", "/>
<TextBlock Style="{StaticResource SmallText}" Text="{Binding Postcode}"/>
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
Thanks for any help.
It seems like you would probably want to modify your GridView's ItemContainerStyle and change its background and visual states to match your requirements. Check my answer to an earlier question related to restyling items here to learn how to extract and modify these styles and templates.
I have a ContentControl wrapped in a ScrollViewer but for some reason I cant work out even though the content that I place within the ContentControl is bigger than the visible space the scrollbars do not get enabled. The verticalscrollbarvisibilty is set to visible.
When I view my silverlight app the vertical scrollbar is also cut off at the bottom i.e. I cant see the button that you would use for scrolling ownwards.
Can anyone shed any light on this or point me in the right direction.
there is no reason for that may be you are doing something wrong see this code may be this will help you
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Width="200" Height="200">
<Grid Width="500" Height="400">
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Left" Text="Hello"/>
<TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Right" Text="World"/>
</Grid>
</ScrollViewer>
sorry forgot to add the layout grid
<Grid x:Name="LayoutRoot" Background="White">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Width="200" Height="200">
<Grid Width="500" Height="400">
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Left" Text="Hello"/>
<TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Right" Text="World"/>
</Grid>
</ScrollViewer>
</Grid>