Develop Reference

NavigationView Item with extra content on right side

I have a NavigationView in my app. I want to add counters/badges to some of the items. But whatever I do, the badge always stays right next to the label. See the image below (on the top is what I have, on the bottom what I want to achieve)
The code I'm currently using is the following:
<NavigationViewItem Icon="Mail">
<NavigationViewItem.Content>
<RelativePanel HorizontalAlignment="Stretch">
<TextBlock RelativePanel.AlignLeftWithPanel="True">Inbox</TextBlock>
<local:Badge RelativePanel.AlignRightWithPanel="True" BadgeText="30"/> <!-- can be replaced with a simple "TextBlock" -->
</RelativePanel>
</NavigationViewItem.Content>
</NavigationViewItem>
(You can subsitute the Badge control with a simple TextBlock)

The problem is that RelativePanel can't get SplitViewOpenPaneThemeLength automatically. so we need specific the width for RelativePanel. As we known SplitViewOpenPaneThemeLength is 320, and SplitViewCompactPaneThemeLength is 48. so the
width of NavigationViewItem.Content is 320-48 = 272. Please refer the following xaml code.
<RelativePanel HorizontalAlignment="Stretch" Width="{ThemeResource SplitViewOpenPaneThemeLength}">
<TextBlock RelativePanel.AlignLeftWithPanel="True">Inbox</TextBlock>
<TextBlock RelativePanel.AlignRightWithPanel="True" Text="30" Margin="0,0,48,0"/>
<!-- can be replaced with a simple "TextBlock" -->
</RelativePanel>

How to set button in side stackpanel to right edge in windows 10 universal app development

I an new to windows app development,i searched for this but not found any where.I need the button at right edge and Stretch the textbox till buttons start.But I am unable to set the button to Right edge.
How to acheve this.

A stackpanel works like a container. If you define layout properties on your stackpanel, then the objects inside your stackpanel cannot be displayed outside of the stackpanel's limits.
For example :
If I set my row and column number in my stackpanel,
<StackPanel Grid.Row="0" Grid.Column="2" Name="Version" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top">
<Label Grid.Column="4" Grid.Row="6" Name="Ver" Content="V." HorizontalAlignment="Right" />
<TextBlock Name="Vers" Text="1.0" TextAlignment="Right" />
</StackPanel>
Then the row/column properties set on my label are ignored and the 'HorizontalAlignment="Right"' will place my label on the right side of the stackpanel, not the grid.
A solution may be to remove your button from your stackpanel, you are then free to place your button anywhere on the grid.
Another solution can be to expand your stackpanel's limits.
To do so, you can use the Grid.ColumnSpan property or simply set your stackpanel on the right of the grid.
Hope that helped.

Windows Phone Progress Bar in Listbox shows random values

In my windows phone 8.1 application I have code like in ListBox template;
<StackPanel>
<ProgressBar x:Name="DownloadProgressBar" Maximum="100" Minimum="0" Value="25" HorizontalAlignment="Stretch" VerticalAlignment="Top" >
</ProgressBar>
</StackPanel>
Even if I am setting static values into control, when page loaded progress bars showing some arbitrary values (progress value). I have around 10 items in the list and all progress bars are showing some another values.
I am expecting that all progress bars should show 25%.
What's wrong in this logic?

Nothing wrong with your logic, put a
<Border BorderThickness="1" BorderBrush="Red">
<!-- rest of your template -->
</Border>
and you will realize what is going on.
You will see that each Item has a different width, thus making your Progress bar stretch to different width values.
To fix this you need to edit <ListBox> ItemContainerStyle's Style.

White space appearing at the bottom of telerik dropdownlist with certain number of items

I'm using telerik controls, and when I use the dropdownlist, with 11 elements, it appears a white space at the bottom of the list.
I tried in the demo page of telerik, to change the content of a dropdownlist with chrome tool and it happens the same.
If I put more than 15 elements, then a bar is displayed and I can scroll, and if there are less than 11 then the height adjusts correctly.
telerik demo
Does someone knows how to remove that withe space?

After dragging a default RadDropDownList onto a winForm I added 11 elements. It would only show about 5 then autoscroll. I changed the DropDownMinSize's Height property to 200 and I got the following:
(http://www.sogentech.com/images/11Elements.jpg)
Judging by the link you gave, I expect you are developing for the web. Here is a short explanation about controlling size from Lancelot over on the Telerik site. I have a feeling the MinSize or equivalent setting (maybe MinDropDownHeight) is what you want to play with. The following code is specifically for Silverlight, but this should get you started on the right path:
<!-- Here I've inserted a RadComboBox, I've also set some initial properties-->
<telerik:RadComboBox Margin="211,59,179,0"
VerticalAlignment="Center"
HorizontalAlignment="Center"
MaxDropDownHeight="225"
MinWidth="100"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto"
IsMouseWheelEnabled="False"
Text="Top Text Title"
EmptyText="empty">
<!-- This is the default style, it uses the parent container's properties such as width and height -->
<telerik:RadComboBoxItem Content="First list Item"/>
<!-- You can explicitly change and set the height/width of the list item by doing this-->
<telerik:RadComboBoxItem Content="Second List Item"
Height="100"
Width="100"/>
<!-- Or you can do what I've done here. I set a Minimum width and height and then set the scrollBar to "Auto"-->
<telerik:RadComboBoxItem Content="Third list item"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto"
MinHeight="50"
MinWidth="200"/>
</telerik:RadComboBox>
</Grid>

textbox dynamically change height when the user goes to a new line

In a WPF application I have a textbox. I have set AcceptReturn to true
But I need to make the textbox bigger when the user clicks enter. What I mean is currently when the user clicks on the enter key, the cursor goes to a new line however the text box is still the same height and the above line is now hidden. Can I make the textboxHeight change dynamically depending on it's content?
Thanks
PS: I cannot use textarea I need to stay with the textboxes

I would suggest to keep it a current size and use the vertical scrollbar. But, if you're doing something that really requires it, place your TextBox into a Grid. Set the Grid row height to auto. Set the Height of the TextBox to Auto. Set the VerticalAlignment of the textbox to Stretch. In the code below I left the scrollbar settings in. You can change those how you see fit.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBox Grid.Row="0" x:Name="scriptTextBox" Margin="10" Height="Auto" Width="Auto" FontFamily="Consolas, Courier New"
HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
MaxLines="9999" AcceptsReturn="True" AcceptsTab="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Text="{Binding Path=Script, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
/>
</Grid>

You say you need to use Textboxes. Can you at least use an overriden Textbox? This worked pretty well in my testing:
public class AutoHeightTextbox : TextBox {
protected override Size ArrangeOverride(Size arrangeBounds) {
Size unboundSize = new Size(this.Width, double.PositiveInfinity);
Size textSize = base.MeasureOverride(unboundSize);
this.Height = textSize.Height;
return base.ArrangeOverride(arrangeBounds);
}
}