So i was making this app in which I set a background on which there is a grid which has high opacity. I wanted buttons on the grid that had lower opacity than the grid and hence, the background is more visible through the buttons in comparison to the grid. Any idea on how i can do that?
You need to set button control opacity less than grid control opacity.
You can able to set opacity of any control in between 0.1 to 1.
<Grid Background="Red "
Grid.Row="1" >
<Button Background="Green"
Opacity=".2"
Content="Button"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
EDIT:
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
<Grid
Grid.Row="1" >
<Grid.Background>
<ImageBrush ImageSource="/backgroundImage.jpg">
</ImageBrush>
</Grid.Background>
<Button
Opacity=".4"
Background="#504E4E"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Bottom"
Content="Button"
Foreground="#FFFFFF"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="32,32,231,389"
BorderBrush="{x:Null}"
Height="186"
Width="193"/>
</Grid>
</Grid>
This will surly help you.
Related
I want to arrange two components, one to left and the other to right in stack panel which is horizontally aligned in windows phone 8.
I need left aligned component should come left side of the page and right aligned component should come right side of the page. There should be gap between these two components.
And left aligned component is static and right aligned component is dynamic.
for static component i put the width = auto and remaining space for dynamic component.
Below is my code.
<Border x:Name="DataBorder" Grid.Row="1" BorderBrush="Gray" CornerRadius="5,5,5,5" BorderThickness="2,2,2,2" Margin="10,30,10,10">
<StackPanel x:Name="settingsPanel" Orientation="Vertical">
<StackPanel x:Name="langPanel" Orientation="Horizontal">
<TextBlock x:Name="langTextBlock" Text="{Binding Path=LocalizedResources.DefaultLanguageText, Source={StaticResource LocalizedStrings}}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0" Foreground="#FF501F6E" FontWeight="Bold" FontSize="25" Width="Auto"/>
<Button Content="English" Height="70" HorizontalAlignment="Right" Margin="5,1,0,0" Name="langbutton" VerticalAlignment="Center" MinWidth="160" Foreground="#FF501F6E" Click="language_Btn_clicked" BorderBrush="{x:Null}">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png" />
</Button.Background>
</Button>
<!--<Image x:Name="arrow" Stretch="Fill" Margin="0,0,0,0" Source="Images/arrow.png" Height="20"/>-->
</StackPanel>
<StackPanel x:Name="pagePanel" Orientation="Horizontal">
<TextBlock x:Name="pageTextBlock" Text="{Binding Path=LocalizedResources.PerPageText, Source={StaticResource LocalizedStrings}}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0" Foreground="#FF501F6E" FontWeight="Bold" FontSize="25" Width="Auto"/>
<Button Content="25" Height="70" HorizontalAlignment="Right" Margin="5,1,0,0" Name="pagebutton" VerticalAlignment="Center" MinWidth="160" Foreground="#FF501F6E" Click="page_Btn_clicked" BorderBrush="{x:Null}">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png" />
</Button.Background>
</Button>
</StackPanel>
</StackPanel>
</Border>
But the right aligned component is coming immediate to the left aligned component.
This is how the StackPanel is designed to layout content. If you want to align one to the left and another to the right I would recommend using a Grid control.
You can layout the Grid in one of two ways
<Grid >
<Button Content="One" Width="75" HorizontalAlignment="Left"/>
<Button Content="Two" Width="75" HorizontalAlignment="Right"/>
</Grid>
Or option 2
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Content="One" />
<Button Content="Two" Grid.Column="1"/>
</Grid>
Option one has the possibility that the buttons overlap each other. Option two has the advantage that each button will have the same width.
i think the main problem with your code is that the stack panel only takes the width it needs to fit the components ... there can many ways to resolve this..
1) Make the horizontal alignment of stackpanel to strech.
2) set the margin between textblock and button by setting margin in either of them.
3) you can use grid columns instead of stackpanel it will resolve the issue .
I followed this example to display my usercontrol inside Coding4Fun MessagePrompt.
http://windowsphonegeek.com/articles/Creating-a-Windows-Phone-7-Trial-Application-Adding-Buy-Now-Functionality
When the Home icon at the bottom of the page is clicked I open MessagePromt which has my UserControl with two buttons as shown in image below.
But for some reason there appears this light white border, I am unable to determine from where it is coming.
Note: I have set border Transparent and 0 thickness for my usercontorl and all controls inside it.
I just want to show the blue panel and no white border and it's width is 300 as what it is seen.
Does any one has any idea?
I got help from "Eric Fleck - Microsoft" on apphub forums. Here's his solution:
<phone:PhoneApplicationPage
...
xmlns:c4f="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls">
<phone:PhoneApplicationPage.Resources>
<ControlTemplate x:Key="MsgPropmtNoBorder" TargetType="c4f:MessagePrompt">
<Grid VerticalAlignment="Stretch">
<Rectangle Fill="{StaticResource TransparentBrush}" />
<Border VerticalAlignment="Top"
Margin="10"
Background="{TemplateBinding Background}"
BorderThickness="0"
BorderBrush="{StaticResource PhoneForegroundBrush}">
<StackPanel Margin="10">
<TextBlock
Text="{TemplateBinding Title}"
Margin="0,-10,-25,10"
FontSize="30"
TextWrapping="Wrap" FontFamily="Segoe WP Light" />
<ContentPresenter Content="{TemplateBinding Body}" />
<StackPanel
Margin="0,10,0,0"
Name="actionButtonArea"
Orientation="Horizontal"
HorizontalAlignment="Center" />
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
</phone:PhoneApplicationPage.Resources>
MessagePrompt prompt = new MessagePrompt();
prompt.Body = new WPUC();
prompt.ActionPopUpButtons.Clear();
prompt.Overlay = new SolidColorBrush(Color.FromArgb(155, 41, 41, 41));
prompt.Template = (ControlTemplate)this.Resources["MsgPropmtNoBorder"];
prompt.Show();
Here's the resultant popup:
I played a bit with the MessagePrompt control, it couldn't found any way to disable or hide the border. It's a shadow kind of effect in MessagePrompt control to provide a popup like appearance.
However, Eventhough you cannot remove it, you can reduce it's effect by setting the Width property of the MessagePrompt equal to your actual blue UserControl ( 300 in this case).
I Have a little problem with a ListBox and its elements. As you can see in my code, the stackpanel for both textblocks is set to 250. This is set like this because otherwise the text expands in 1 line and you cannot see the button. As obvious the problem is that setting this parameter as static, if the resolution or the orientation changes wont fit the screen completely. I would like to know if there is a way to set this width dynamically.
<ListBox x:Name="attractionsListbox" Margin="0,0,-12,0" ItemsSource="{Binding Attractions}" Loaded="attractionsListbox_Loaded">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Tag="{Binding Name}" Tap="AttractionListBoxItem_Tap">
<Image Height="140" Width="140" Margin="0,5,0,0" Source="{Binding Thumbnail}" MaxWidth="140" MaxHeight="140" Stretch="Fill" />
<StackPanel Width="250">
<TextBlock x:Name="AttractionName" Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSmallStyle}" FontSize="20" Foreground="Black" FontWeight="Bold" />
<TextBlock Text="{Binding ShortDescription}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSmallStyle }" Foreground="Black" />
</StackPanel>
<Button Width="80" Height="80" Padding="10,3,10,5" BorderBrush="Black" Click="Add_Todo_Click" Tag="{Binding Name}">
<Button.Background>
<ImageBrush ImageSource="/SundsvallWP7;component/Images/appbar.add.rest.png"/>
</Button.Background>
</Button>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
(In android there is weights, where you can assign the weight of each control, don't know if this exists in Windows Phone).
Thank you very much.
A DockPanel may work better for your scenario than a StackPanel. Put the button on the right and the image on the left, then your middle StackPanel content will flow to fill.
http://www.windowsphonegeek.com/articles/Using-DockPanel-in-WP7.
Alternatively, there are only the two orientations and resolution shouldn't be changing. You could just bind the Width to the Orientation with a value converter.
In my project, I use ScrollViewer to show some long height infomation.
I use like this:
<Grid Grid.Row="1" Height="630">
<ScrollViewer Background="Red" Grid.Row="1">
<Grid>
<Rectangle Height="3000" Fill="LightBlue" Width="440"/>
</Grid>
</ScrollViewer>
</Grid>
But, unfortunately, the rectangle does not show completely when scrollView bar's vertical height > 2000.
I have tested without Grid as ScrollViewer's content, only with Rectangle and the result is the same.
And the bug is also happens with Width.
Any you have any idea what's the workaround? How to deal with it?
This post is the same issue without any fixes.
The test full xaml is :
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<Grid Grid.Row="1" Height="630">
<ScrollViewer Background="Red" Grid.Row="1">
<Grid>
<Rectangle Height="3000" Fill="LightBlue" Width="440"/>
</Grid>
</ScrollViewer>
</Grid>
</Grid>
If it just a text, you could use this custom control: scrollable textblock. Otherwise, divide your content into blocks with size < 2048.
UPD:
2048px is a limit for GPU cached graphics. You can use a lot of controls (< 2048) inside a scrollviewer (total > 2048). In some cases all is fine, but in some it doesn't
For example:
<ScrollViewer Background="#4FFF6060">
<Grid Background="#FFFF8A8A" Width="240" HorizontalAlignment="Left" d:LayoutOverrides="Height">
<Rectangle Fill="Blue" Height="4000" VerticalAlignment="Top" Width="120" HorizontalAlignment="Left"/>
<Rectangle Fill="Red" Height="2000" VerticalAlignment="Top" Width="120" HorizontalAlignment="Right"/>
<Rectangle Fill="Red" Height="2000" VerticalAlignment="Top" Width="120" HorizontalAlignment="Right" Margin="0,2000,0,0"/>
</Grid>
</ScrollViewer>
In this case blue rectangle cropped at 2048px, but two rectangles with 2000px height placed one above the other looks fine.
The second example uses StackPanel to show 4000px area and it works too
<StackPanel Background="#FFFF8A8A" HorizontalAlignment="Right" Width="240" d:LayoutOverrides="Height">
<Rectangle Fill="#FF88FF00" Height="2000" Width="240" HorizontalAlignment="Right"/>
<Rectangle Fill="#FF88FF00" Height="2000" VerticalAlignment="Top" Width="240" HorizontalAlignment="Right"/>
</StackPanel>
Max. texture size on WP7 is 2048x2048. The rectangle height exceeds this limit. Once you decrease it below this limit, it starts working.
This code is better suited to experiments as you can identify bottom border:
<Grid Grid.Row="1" Height="630">
<ScrollViewer Background="Red" Grid.Row="1">
<Grid>
<Border Height="2048" BorderBrush="Blue" BorderThickness="5">
<Rectangle Height="2000" Fill="LightBlue" Width="440"/>
</Border>
</Grid>
</ScrollViewer>
</Grid>
Once you increase the Border height, the bottom part will disappear.
On the other hand, I have to say that this behavior surprises me, too. I would expect that system decomposes large objects into smaller textures, but apparently WP7 designers decided not to do so, but rather manifest UI bug.
In a listbox I have a list of titles with an edit icon next to each, how do I increase the touchable area so that even if the user touches part of the title, it actually triggers the image event?
I assume I need to wrap the image in another element but cannot work out what that needs to be.
I tried wrapping the image in a button and add padding to the button but then it pushed the UI elements around, I do not want to affect the presentation, just the none-visible touchable area.
Wrap it in a button - you're totally in the right ball-park. But you need to edit the control template of the button and reduce down all the standard padding and margin, borders etc. so its just a raw touchable region.
You can then wrap anything in this button and apply your template/style to make anything interactive.
Luke
You could try wrapping in a Panel or Grid.
Or just adjust the margin and Z-Order.
Put the image in a button, set the size of the button you want & then set the Stroke property to "No brush" on the button to remove the border.
Try it:
<Border BorderBrush="Transparent"
BorderThickness="20,25,20,0"
Background="Transparent">
<Grid/>
</Border>
or use it in other variations:
<Border Background="Transparent">
<Grid Margin="20 25 20 0"/>
</Border>
full sample with button: (no background interaction when pressed at this sample)
<Button BorderBrush="Transparent"
Tag="{Binding SelectedPhoto.commentsCount}">
<Button.Template>
<ControlTemplate>
<Border BorderThickness="20,25,20,0"
BorderBrush="Transparent"
Background="Transparent">
<StackPanel Orientation="Horizontal"
VerticalAlignment="Top">
<Grid Margin="0 0 4 0"
Visibility="{Binding CommentsAllowedForAlbum,Converter={StaticResource BoolToVisibilityConverter}}">
<TextBlock Text="{TemplateBinding Tag}"
Visibility="{Binding SelectedPhoto.HasComments,Converter={StaticResource BoolToVisibilityConverter}}"
Foreground="{StaticResource BlueColorBrush}"
FontSize="{StaticResource MFontSize36}" />
</Grid>
<Image Source="/Images/photo_comments_icon.png"
Stretch="Uniform"
MaxWidth="23"
Visibility="{Binding CommentsAllowedForAlbum,Converter={StaticResource BoolToVisibilityConverter}}"
Margin="0 7 0 0"
VerticalAlignment="Top" />
<Image Source="/Images/photo_comments_icon_blocked.png"
Stretch="Uniform"
MaxWidth="23"
Visibility="{Binding CommentsAllowedForAlbum,Converter={StaticResource OppositeBoolToVisibilityConverter}}"
Margin="0 7 0 0"
VerticalAlignment="Top" />
</StackPanel>
</Border>
</ControlTemplate>
</Button.Template>
</Button>