I have popup-like border in my page. There is slider inside the popup. The slider has range from 0 to 100, but when I slide it to the right edge I get somewhere near to vlaue 93. Slider is full but its maximum is 100. It seems that slider overflowed the parent container. I tried to use all combinations of margins and static widths, but without success. Can anyone tell me what I am supposed to set, to get it work?
Here is fragment of code:
<Grid x:Name="LayoutRoot" >
...
<Border VerticalAlignment="Center" Margin="24,0" Visibility="{Binding ...}">
<StackPanel>
<TextBlock Text="choose desired position" />
<Slider x:Name="sldGoto" Maximum="100" SmallChange="1" LargeChange="10" Value="93"/>
</StackPanel>
</Border>
</Grid>
With this code (value of slider set to 93) is slider full. What's wrong?
This is a known bug in the current release when using Slider on Windows Phone 7 with the standard control template. I recommend using the approach you found on Dave's blog for now.
Well I just find article with nice Slider ControlTemplate that just works.
I would still appreciate if anyone could confirm this behavior or told me what I did wrong.
Thanks
Related
I would like to have the PivotItems in my Pivot to wrap around when the items exceed the App width much like a WrapPanel instead of the default scrolling. I tried setting up the Pivot.ItemTemplate as shown below but that didnt work. Thanks in advance.
<Pivot.ItemTemplate>
<DataTemplate>
<controls:WrapPanel />
</DataTemplate>
</Pivot.ItemTemplate>
There are many design mechanisms inside the HeaderTemplate of NavigationView and Pivot. It is very difficult to change it. But we could achieve a similar effect through layout. You could add a wrapPanel, then add controls inside the panel and use Frame to navigate to another page. As follows:
<StackPanel >
<wrap:WrapPanel x:Name="Itemgrid" Orientation="Horizontal" >
//add your control to show header
</wrap:WrapPanel >
<Frame x:Name="ContentFrame"/>
</StackPanel>
I edited a ScrollViewer's template to wait only 0.5 seconds before hiding the scrollbars, and this succeeds in hiding them at that time, but they reappear for another 0.5 seconds. Why?
To reproduce, create a page resource for a ScrollViewer's Style with the default Template (find it here on MSDN) and change the 3 occurances of "3" to "0.5". Then use the following XAML:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer Height="500" Width="500" Style="{StaticResource ScrollViewerControlTemplate1}">
<Grid Background="Blue" Height="1000" Width="1000">
</Grid>
</ScrollViewer>
</Grid>
Move the cursor over the ScrollViewer to show the scrollbar. Leave the cursor motionless for 0.5 seconds to see the scrollbar disappear. It then reappears for another 0.5 seconds. Why?
I have a feeling you're not going to make it work, but if you REALLY think it's worth your time - you could put the ScrollBars in your own grids and run your own animations on the grids whenever you decide you want to do that.
What I'm trying to do was extremely easy in SL/WP 8 but seems to be impossible in WP 8.1 without redefining the Hub template myself. I want to create a hub with a header that:
Scrolls horizontally.
Has a background that scrolls along with it.
Has no margins on either side.
I know this can probably be solved by just having my background image include the background and the hub just being transparent, but I wanted to know if there was a way to solve it in XAML.
Putting a Grid with a background into the Hub's header just highlights the background as much as the hub needs--not stretching all the way across:
<Hub>
<Hub.Header>
<Grid Background="Red" Height="60">
<TextBlock Text="My Header" />
</Grid>
</Hub.Header>
</Hub>
The above makes the header with the text "My Header" but only the text part has a background. Furthermore, the Hub itself seems to have inner margins of 16 on each side so the background doesn't stretch across the whole phone screen.
Should I just be going with a background or deconstructing the template to remove the margins?
Far from an elegant solution but basically I put the background outside the Hub and gave it negative margins like so. Hacky but I guess it works.
<Grid>
<!-- This is the header bar -->
<Grid Height="64" Background="Red" />
<Hub>
<Hub.Header>
<StackPanel Margin="-6,0,0,0">
...
</StackPanel>
</Hub.Header>
<!-- actually just defined the margin in my ResourceDictionary to target all HubSections -->
<HubSection Header="section 1" Margin="-2,-20,-4,8" />
<HubSection Header="section 2" Margin="-2,-20,-4,8" />
</Hub>
</Grid>
In windows phone 8 I want to put an Image in a circle. Is there a container like grid which have a circular form? I know that there is ellipse bit it is not a container
Here is how I do it.
<Ellipse Width="100"
Height="100">
<Ellipse.Fill>
<ImageBrush>
<ImageBrush.ImageSource>
<BitmapImage UriSource="/YourImage.png" />
</ImageBrush.ImageSource>
</ImageBrush>
</Ellipse.Fill>
</Ellipse>
As a best practice, consider setting DecodePixelWidth and DecodePixelHeight to the same size as your ellipse.
Another option to mleroy's answer (since if I remember right WP is based on silverlight and I often run into a lack of brush availability to do stuff like that.) You could do this using the Clip property.
For example;
<Image
Source="blah\yourpicture.jpg"
Width="100" Height="100">
<Image.Clip>
<EllipseGeometry
RadiusX="100"
RadiusY="100"
Center="100,100"/>
</Image.Clip>
</Image>
Hope this helps, cheers
Edit Addition: You could also bind your radius X/Y to the width/height of the image for more flexibility on dynamic sized images.
In my app I have a list box that contains a stack panel with text block items. The text block items have a text wrapping or text trimming property to avoid that the text block items slide outside the visible range.
As far as I know the text wrapping and text trimming property need a fixed width to insert a line break. For this reason, I set a fixed width for the title (Width="456") and for the description (Width="432"):
<ListBox x:Name="CategoryList" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<StackPanel>
<TextBlock
Style="{StaticResource PhoneTextLargeStyle}"
Text="{Binding Name}"
TextTrimming="WordEllipsis"
Width="456"
/>
<TextBlock
Style="{StaticResource PhoneTextSubtleStyle}"
Margin="12,-6,12,0"
Text="{Binding ContentDescription}"
TextWrapping="Wrap"
Width="432"
/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The problem now is that when I turn the phone, the fixed width for the horizontal mode is too small. Is there a way to put in place of the fixed width a width depending on the device width?
Screenshot:
in general its never a good idea in XAML to use fixed width/height (for "whole" page(100%)) since XAML was designed to do this job for you, so you might concentrate on your layout and the technology covers the aspect of different screens and sizes.
So, if you use a fixed width to display sth. on the whole page its a very good indicator that something is wrong.
In your case you've got the use of StackPanels wrong. StackPanels are designed in a way, that their size is not limited in the direction of their orientation. This means, a StackPanel that has got its orientation set to horizontal might grow indefinetely in width and a sp with orientation set to vertical wouldn't be limited in its height.
Now this leads us to your problem: you have used an indefintely-in-width-growing element in an indefinetely-in-height-growing element (two stackpanels).
Even though you might by some tricks limit their size (e.g. that could be achieved by some data bindings), this isn't what should be done.
I'd say - since in the parent StackPanel nothing is stacking - substitute it with some other panel/container (or just remove it) and your problem will be gone.
Example
<DataTemplate>
<!-- If you need more child elements uncomment the following line -->
<!-- <Grid> -->
<StackPanel Margin="0,0,0,17">
<TextBlock ... />
<!-- no need to set width on the following textblock -->
<TextBlock ... TextWrapping="Wrap" />
</StackPanel>
<!-- </Grid> -->
</DataTemplate>