I'm having a lot of trouble trying to get this working, and was hoping someone could help.
I have a ScrollViewer in my WindowsPhone app, and I'm trying to emulate a similar control to the "Date/Time Chooser" that you'd see in the native Calendar app. So my ScrollViewer contains a StackPanel with multiple square Canvases with rectangles and TextBlocks. My intent is to watch the "ScrollStates", and when the VisualState changes to "NotScrolling", I'd then check the VerticalOffset of the ScrollViewer and animate a slide to the nearest "snap-to" position (ie. aligning the square to the correct/middle position).
<ScrollViewer Name="sv" Width="100" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Disabled" Loaded="ScrollViewer_Loaded">
<StackPanel>
<Canvas MaxWidth="77" MaxHeight="80" MinWidth="80" MinHeight="80" Margin="3">
<Rectangle Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Width="80" Height="80" />
<TextBlock Text="1" FontSize="36" FontWeight="Bold" TextAlignment="Center" HorizontalAlignment="Center" Width="70" Canvas.Left="6" Canvas.Top="14" LineHeight="48" />
</Canvas>
<Canvas MaxWidth="77" MaxHeight="80" MinWidth="80" MinHeight="80" Margin="3">
<Rectangle Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Width="80" Height="80" />
<TextBlock Text="2" FontSize="36" FontWeight="Bold" TextAlignment="Center" HorizontalAlignment="Center" Width="70" Canvas.Left="6" Canvas.Top="14" LineHeight="48" />
</Canvas>
<Canvas MaxWidth="77" MaxHeight="80" MinWidth="80" MinHeight="80" Margin="3">
<Rectangle Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Width="80" Height="80" />
<TextBlock Text="3" FontSize="36" FontWeight="Bold" TextAlignment="Center" HorizontalAlignment="Center" Width="70" Canvas.Left="6" Canvas.Top="14" LineHeight="48" />
</Canvas>
...
</StackPanel>
</ScrollViewer>
I've been looking at various examples that hook into the VisualStates, like http://blogs.msdn.com/b/ptorr/archive/2010/07/23/how-to-detect-when-a-list-is-scrolling-or-not.aspx ; http://developingfor.net/2009/02/16/fun-with-the-wpf-scrollviewer/ ; http://blogs.msdn.com/b/slmperf/archive/2011/06/30/windows-phone-mango-change-listbox-how-to-detect-compression-end-of-scroll-states.aspx ... all seem to have similar code to this:
// Visual States are always on the first child of the control template
FrameworkElement element = VisualTreeHelper.GetChild(sv, 0) as FrameworkElement;
... which then goes on to seek out VisualStateGroup group = FindVisualState(element, "ScrollStates");, from which they can hook an Event to when it changes.
However... whenever I try doing the VisualTreeHelper.GetChild(sv,0) as FrameworkElement, the app crashes with an exception of type 'System.ArgumentOutOfRangeException'. If I output VisualTreeHelper.GetChildrenCount(sv), it is always "0". How is it seemingly working for everyone else? 8)
Any help would be greatly appreciated. Thanks!
(As an alternative, has anyone made this kind of "Select Box" already in a reusable control I could use instead of trying to reinvent it?)
Did you wait till the scrollviewer's Loaded event fires before trying to get the scrollviewer children??
Related
I have a little question. I'm new to WPF and a strange thing happened to me. In the designer everything looks fine, but as soon as I start the application, a piece ,,cuts off"(via.photo) and it looks pretty bad. Could it be that the application is not responsive?
My XAML code:
<TabItem Header="TabItem"
Visibility="Hidden"
x:Name="Home_Page"
Background="{x:Null}"
BorderBrush="{x:Null}" Height="Auto"
Width="Auto"
>
<Border
Background="Black"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="1340"
Height="1100"
CornerRadius="20"
>
<Border
Background="White"
CornerRadius="20"
Height="700"
Width="500"
Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center"
>
<Grid
>
<TextBlock
Text="Welcome"
Width="200"
Height="200"
Foreground="Black"
FontSize="50" FontFamily="/Peel_App;component/Fonts/#Kashima Brush Demo"
>
</TextBlock>
</Grid>
</Border>
</Border>
</TabItem>
After what I edited app:
Your code has a few issues:
You're hardcoding the Margin values to position your controls. Instead, you should use proper panels (DockPanel, WrapPanel, and Grid). Use Margin property to set margin, not a position.
Use HorizontalAlignment and VerticalAlignment properties to position your elements, thus your UI would be more responsive and user-friendly.
To be able to view, how your window and its content would look like - try to set d:DesignHeght and d:DesignWidth properties on a window. Try to Google how to use them.
In the end, your code should look like following:
<TabItem Header="TabItem"
Visibility="Hidden"
x:Name="Home_Page"
Background="{x:Null}"
BorderBrush="{x:Null}"> <!-- Properties order is a bit confusing, it is better to order them by priority, or just alphabetically. -->
<Border Background="Black">
<Border Background="White"
CornerRadius="20"
Margin="0,0,93,118"> <!-- Should it have such values? Maybe just somenthing like Margin="0 0 90 120"? -->
<Grid>
<TextBlock Text="Welcome"
Foreground="Black"
FontSize="50"
FontFamily="/Peel_App;component/Fonts/#Kashima Brush Demo"/>
</Grid>
</Border>
</Border>
</TabItem>
In my Windows Phone 8 application, i am using one usercontrol to display in all pages.
UserControl XAML code:
<Canvas x:Name="ExpiryPopUp_Container" Margin="0,0,0,0" Background="Transparent" Width="Auto" Height="Auto">
<Border x:Name="Delete" Background="#FFFFFFFF" CornerRadius="10,10,10,10" BorderBrush="#8ca5b9" BorderThickness="2" Height="180" Canvas.Left="58" Canvas.Top="320" Grid.Row="1" Width="360">
<Canvas>
<Border Background="{StaticResource LeftNavBackground}" Height="50" CornerRadius="10,10,0,0" Width="356">
<TextBlock FontSize="26" TextAlignment="Center" FontFamily="/Assets/Fonts/OpenSans-Regular.ttf#Open Sans Regular" Text="Alert" Width="356" Canvas.Top="10" Height="28"/>
</Border>
<TextBlock Text="Oops! Something went wrong with network connection" TextWrapping="Wrap" FontSize="22" FontFamily="/Assets/Fonts/OpenSans-Regular.ttf#Open Sans Regular" TextAlignment="Center" Foreground="{StaticResource BlueText}" Canvas.Top="62" Width="356"/>
<Border x:Name="BorderOk" Background="{StaticResource buttonBackground}" Height="40" Width="98" Canvas.Left="132" Canvas.Top="125" Tap="BorderOk_Tap_1">
<TextBlock TextAlignment="Center" Text="Ok" FontSize="26" FontFamily="/Assets/Fonts/OpenSans-Regular.ttf#Open Sans Regular" Canvas.Top="14" Margin="10,5,10,2"/>
</Border>
</Canvas>
</Border>
</Canvas>
For Border with name BorderOk has Tap event. I am using this usercontrol throughout my application,almost in all pages. Once user tap on the border it will navigate to MainPage.xaml, but my problem is in some pages i want it to not navigate (means the functionality of tap event to be changed). So can i achieve this by using same usercontrol?If so, how to do it?
One thing you can do is adding a parameter to your user control, for example "shouldNavigate" and set it everytime you use it(or have a default value of true and change it to false in your special situation). Use the value of this parameter in Tap event.
It's been discussed a number of times on SO, check it out: How to read a passed parameter in a WPF UserControl?
I have a listbox with objects but I cannot scroll to the bottom of the page. What is the problem? This is the code that I'm using.
<Grid>
<Image Name="Nietcomment" Source="write.png" Width="70" Margin="350,-850,0,0" Tap="Login_popup" Visibility="Visible"/>
<Image Name="welcomment" Source="write2.png" Width="70" Margin="350,-850,0,0" Tap="Login_popup_remove" Visibility="Collapsed"/>
<ScrollViewer Name="scrollview" VerticalScrollBarVisibility="Visible" Margin="0,0,0,0" Foreground="Black">
<StackPanel>
<TextBlock x:Name="NTitelComment" Text="{Binding}" TextWrapping="Wrap" FontSize="25" Margin="10,0,10,0" Foreground="#FFE5001b"/>
<Line Stretch="Fill" Stroke="Black" X1="0" X2="1" Y1="0" Y2="0" Margin="10,0,10,0"/>
<TextBlock x:Name="tijdComment" Text="{Binding}" Margin="50,0,10,0" Foreground="Black"/>
<Image Height="20" Width="20" Margin="-380,-20,0,0" Source="/PostDateIcon.png"/>
<ListBox Margin="0,0,0,20" Name="lbComments" VerticalAlignment="Top" />
</StackPanel>
</ScrollViewer>
</Grid>
If you put a border around your ScrollViewer, can you see if it goes outside of the screen maybe? Will it help to set a fixed height of the Grid or ScrollViewer?
Keep in mind the phone has built in scroll, so your ScrollViewer maybe doesn't play well with it.
With so much fixed margins, your layout will be impossible to manage, especially when dealing with differents screen resolutions and especially with negative margins.
Anyway, right now, you have two scrollviewers, as your listbox contains one as well.
You should disable the listbox scrollviewer or it will prevent your page to scroll.
Just change your listbox:
<ListBox
Margin="0,0,0,20"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
Name="lbComments"
VerticalAlignment="Top" />
It will disable it's scrollviewer and allow it to scroll with the rest of the page.
I am considering my Launch Screen/Dashboard screen having tiles(Squares with a few lines of information on them). I understand that tiles are not a UI object for use inside Windows Phone apps, but I've seen some people fake them somehow.
Can anybody gimme and some tips and guidance as to how this is achieved? I am under the impression of what I have seen in my first 2 days working on Win-Mobile that you cannot stack view objects on top of each other. For example drawing a square object and then drawing 3 lines of text on top of that to make a tile.
Many Thanks,
-Code
Was it the HubTile control you saw?
Here is what I am doing for my Dashboard page in my application. It is simply a StackPanel with two TextBlocks inside. These StackPanels are then inside of a WrapPanel from the Silverlight Toolkit for Windows Phone inside of a ListBox, which you don't have to use.
<ListBox Name="lstTiles" Margin="0,0,-12,0">
<ListBoxItem>
<StackPanel Background="{StaticResource PhoneAccentBrush}" Width="173" Height="173" Margin="12,12,0,0" Tap="stkSignIn_Tap">
<TextBlock Text="Tile Title" Style="{StaticResource PhoneTextTitle2Style}" Foreground="White" TextWrapping="Wrap" Margin="12,6,12,12" Height="106" />
<TextBlock Text="Your subtitle here" Style="{StaticResource PhoneTextNormalStyle}" Foreground="White" Margin="12,12,12,12" VerticalAlignment="Bottom" />
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Background="{StaticResource PhoneAccentBrush}" Width="173" Height="173" Margin="12,12,0,0" Tap="stkSignIn_Tap">
<TextBlock Text="Tile Title" Style="{StaticResource PhoneTextTitle2Style}" Foreground="White" TextWrapping="Wrap" Margin="12,6,12,12" Height="106" />
<TextBlock Text="Your subtitle here" Style="{StaticResource PhoneTextNormalStyle}" Foreground="White" Margin="12,12,12,12" VerticalAlignment="Bottom" />
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Background="{StaticResource PhoneAccentBrush}" Width="173" Height="173" Margin="12,12,0,0" Tap="stkSignIn_Tap">
<TextBlock Text="Tile Title" Style="{StaticResource PhoneTextTitle2Style}" Foreground="White" TextWrapping="Wrap" Margin="12,6,12,12" Height="106" />
<TextBlock Text="Your subtitle here" Style="{StaticResource PhoneTextNormalStyle}" Foreground="White" Margin="12,12,12,12" VerticalAlignment="Bottom" />
</StackPanel>
</ListBoxItem>
</ListBox>
The Telerik RADHubTile control can do this for you. Please, check out this article:
New Hub Tile Control for Your Windows Phone Apps
Note: the library cost around $99 I think.
There are many tile controls available now, but for the sake of anyone else going in search of one, you can find my pretty simple 'home grown' tile control here: http://www.crisrowlands.com/wpdev-tips-4/
I am using a rectangle and putting emotion images in it, and i want to do is if I make the rectangle hidden, the emotion images in it should be hidden.
I am attaching an image for help in it.
Please let me know which property should I use for getting this, in Windows Forms if we use panel, this can be done automatically. But in WPF C#, this is not done automatically.
Here is the code
<Rectangle Grid.ColumnSpan="2" Height="71" HorizontalAlignment="Left" Margin="226,262,0,0" Name="rectangle2" Stroke="Black" VerticalAlignment="Top" Width="192" Fill="#B5101010" Visibility="Hidden" />
<Image Height="27" HorizontalAlignment="Left" Margin="229,266,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="28" Source="/WPFTEST;component/Images/emo/emotion_evilgrin.png" MouseUp="image1_MouseUp_1" Visibility="Hidden" />
<Image Height="27" HorizontalAlignment="Left" Margin="264,266,0,0" Name="image2" Source="/WPFTEST;component/Images/emo/emotion_grin.png" Stretch="Fill" VerticalAlignment="Top" Width="28" MouseUp="image2_MouseUp" Visibility="Hidden" />
<Image Height="27" HorizontalAlignment="Left" Margin="34,299,0,0" Name="image4" Source="/WPFTEST;component/Images/emo/emotion_tongue.png" Stretch="Fill" VerticalAlignment="Top" Width="28" Grid.Column="1" MouseUp="image4_MouseUp" Visibility="Hidden" />
<Image Height="27" HorizontalAlignment="Left" Margin="68,266,0,0" Name="image5" Source="/WPFTEST;component/Images/emo/emotion_suprised.png" Stretch="Fill" VerticalAlignment="Top" Width="28" Grid.Column="1" MouseUp="image5_MouseUp" Visibility="Hidden" />
<Image Height="27" HorizontalAlignment="Left" Margin="34,266,0,0" Name="image6" Source="/WPFTEST;component/Images/emo/emotion_smile.png" Stretch="Fill" VerticalAlignment="Top" Width="28" Grid.Column="1" MouseUp="image6_MouseUp" Visibility="Hidden" />
<Image Height="27" HorizontalAlignment="Left" Margin="0,266,0,0" Name="image7" Source="/WPFTEST;component/Images/emo/emotion_happy.png" Stretch="Fill" VerticalAlignment="Top" Width="28" Grid.Column="1" MouseUp="image7_MouseUp" Visibility="Hidden" />
<Image Height="27" HorizontalAlignment="Left" Margin="0,299,0,0" Name="image8" Source="/WPFTEST;component/Images/emo/emotion_wink.png" Stretch="Fill" VerticalAlignment="Top" Width="28" Grid.Column="1" MouseUp="image8_MouseUp" Visibility="Hidden" />
<Image Height="27" HorizontalAlignment="Left" Margin="230,299,0,0" Name="image9" Source="/WPFTEST;component/Images/emo/emotion_unhappy.png" Stretch="Fill" VerticalAlignment="Top" Width="28" MouseUp="image9_MouseUp" Visibility="Hidden" />
<Image Height="27" HorizontalAlignment="Left" Margin="265,299,0,0" Name="image10" Source="/WPFTEST;component/Images/emo/emotion_waii.png" Stretch="Fill" VerticalAlignment="Top" Width="28" MouseUp="image10_MouseUp" Visibility="Hidden" />
I know that it is not under the rectangle tag, but if i add images under rectangle tag then it causes error.
Thanks
Atif
If those icons are part of the "rectangle" which should be an ItemsControl or panel of some sort, the icons will hide if the parent container is hidden (Visibility = Visibility.Hidden/Collapsed).
Edit: The images are not part of the rectangle they are just placed on top using horrible margin abusing code.
There is no relationship between the rectangle and the icons. As i said, the icons need to be added as children of a container. (e.g. ItemsControl with WrapPanel as ItemsPanel) Surely winforms would not hide the icons either if they are not part of an owning container...
If you want to leave your code as is and not have to change those margins you can just bind the Visibility property of the icons to the Visibility property of the rectangle.
Visibility="{Binding Visibility, ElementName=rectangle2}"