I am currently working on Windows Phone 8 Application, i have a ListBox with TextBlock with border as a background to it, when i click on the item in the list box there is no indication to the user that he as selected that item, how to add selected item color to it?
And also i need to select multiple items in the ListBox, Which ever the item is selected its background color should be changed.
Below is my code:
<Grid x:Name="ListBoxLayout" Grid.Row="2" Margin="4,0,0,0">
<ListBox Name="listBox"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
SelectionChanged="TopicListboxSelectionChanged"
ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="AnswerCellBack" Tap="AnswerCellBack_Tap" Margin="0,0,0,4" Orientation="Horizontal">
<Border Name="borderColor" Background="#FFF2F4F7">
<TextBlock Name="text"
Width="456"
Padding="10,20,10,20"
TextAlignment="Center"
Text="{Binding Path=Value}"
Style="{StaticResource AnswerTextStyle}"/>
</Border>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
You need to use SelectionMode property to enable multiple selection in listbox.
Or you can use LongListMultiSelector from Windows Phone toolkit.
To change the background color of selected item, change the style template of listbox as mentioned here,
http://msdn.microsoft.com/en-us/library/cc278062%28v=vs.95%29.aspx.
Find this line in the ListBoxItem Style, and change it to your color
<Rectangle x:Name="fillColor2" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
You can declare styles in App.xaml under the Application.Resources tag.
Or like these 2 ways in your page.
First Way.
<ListBox Name="lstbx">
<ListBox.Style>
// Your Style
</ListBox.Style>
</ListBox>
Second way.
Declare the styles under the tag phone:PhoneApplicationPage.Resources, like this.
<phone:PhoneApplicationPage
x:Class="Test.Test"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="False">
<phone:PhoneApplicationPage.Resources>
<Style x:Key="MyListStyle" TargetType="ListBoxItem">
//your style
</Style>
</phone:PhoneApplicationPage.Resources>
<ListBox Name="list1" Style="{StaticResource MyListStyle}"
//....
Related
I got started learning Universal Windows Apps. For my demo application, I am trying to change the placeholder foreground of a TextBox control. To set its color, I set a resource key called TextControlPlaceholderForeground (as per this documentation) on the same XAML page definition that contains the control. However, the placeholder color of TextBox is not set. It looks as if no placeholder text is set when the control is not in a focused state. When it receives focus, the placeholder becomes visible, but still not the color that is set to it. Here is my XAML:
<Page
x:Class="MyApp.AuthenticationPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<SolidColorBrush x:Key="TextControlPlaceholderForeground" Color="Green" />
</Page.Resources>
<Grid>
<Border
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Margin="0,0,0,10"
Background="White"
Padding="10"
CornerRadius="10"
Width="300"
>
<StackPanel Orientation="Vertical">
<!-- The placeholder of the TextBox below doesn't become green -->
<TextBox x:Name="emailInput" PlaceholderText="Email" Margin="0,0,0,10" />
<!-- However, the placeholder of this PasswordBox becomes green -->
<PasswordBox x:Name="passwordInput" PlaceholderText="Password" Margin="0,0,0,10" />
<Button HorizontalAlignment="Stretch" Content="LOG IN" Click="onLoginSubmit" Style="{StaticResource AccentButtonStyle}"/>
<HyperlinkButton FontSize="11" Foreground="Black" Content="Forgot your password?" HorizontalAlignment="Center" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="Don't have an account yet?" Foreground="Black" FontSize="11" Padding="0,0,5,0"/>
<HyperlinkButton Padding="0" FontWeight="Normal" >
<TextBlock Text="Create new account" Foreground="Black" TextDecorations="Underline" FontSize="11"/>
</HyperlinkButton>
</StackPanel>
</StackPanel>
</Border>
</Grid>
</Page>
An observation: When I try to set TextBox's placeholder text color via Style tags, it works.
<Style x:Key="TextBoxStyle" TargetType="TextBox">
<Setter Property="PlaceholderForeground" Value="Green" />
</Style>
I didn't understand what happens here. I know I am missing something very small but couldn't see it.
First, let me explain why the second approach works. There is a little bit of difference between the PasswordBox and the TextBox about how they defined the Placeholder Text color. Both of the PasswordBox and the TextBox has a PlaceholderTextContentPresenter element in their styles which is a TextBlock. But they have different value for the Foreground property when using this TextBlock.
TextBox:
<TextBlock x:Name="PlaceholderTextContentPresenter" Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource Mode=TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForeground}}"
PasswordBox
<TextBlock x:Name="PlaceholderTextContentPresenter" Foreground="{ThemeResource TextControlPlaceholderForeground}"
You could see that the PasswordBox is directly using the TextControlPlaceholderForeground that you defined as the color but the TextBox is using a binding and the binding source is the PlaceholderForeground property. So when you set this property, the TextBox will show the color as you want.
So back to the first question, if you want to change the foreground of the Placeholder Text, you will need to create a default style of the TextBox and change the binding of the Foreground of the PlaceholderTextContentPresenter element to use the TextControlPlaceholderForegrounddirectly like what the **PasswordBox ** did.
I have a custom control which contains one text-block, one combo-box and one hyper-link button.
<UserControl x:Class="IXExpress.Controls.WorkspaceIndexes"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerikSdk="http://schemas.telerik.com/2008/xaml/presentation"
mc:Ignorable="d"
Height="Auto" Width="Auto">
<Grid x:Name="LayoutRoot">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<TextBlock x:Name="IndexNameTextBlock" Text="{Binding ApplicationStrings.SelectIndexName, Source={StaticResource ResourceWrapper}, Mode=OneTime}" Margin="3,5" TextAlignment="Left" VerticalAlignment="Center" Visibility="Visible"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<telerikSdk:RadComboBox x:Name="IndexNameCB"
DisplayMemberPath="IndexName"
HorizontalAlignment="Center"
IsDropDownOpen="False"
Margin="3,0,3,5"
MinWidth="150"
Width="150"
VerticalAlignment="Center"
VerticalContentAlignment="Center"
Visibility="Visible"
SelectionChanged="IndexNameCB_SelectionChanged"/>
<HyperlinkButton x:Name="CreateNewIndexLink"
Content="Create New"
VerticalContentAlignment="Center"
Click="CreateNewIndexLink_Click"/>
</StackPanel>
</StackPanel>
</Grid>
</UserControl>
I am using it on another page as following:
<StackPanel Orientation="Vertical">
<customControls:WorkspaceIndexes x:Name="WorkspaceIndexes" IsMoreTextRequired="True" Margin="3"/>
</StackPanel>
The issue is, on some condition when I want to disable this control but it only disables combo-box and hyper-link button.
code:
if (my condition)
WorkspaceIndexes.IsEnabled = true;
else
WorkspaceIndexes.IsEnabled = false;
Result:
http://imgur.com/L6tbOwo
I also don't see IsEnabled option for "IndexNameTextBlock" text-block, Why is that?
You can't see the IsEnabled property for the TextBlock because it doesn't have the property. The other Elements are derived from Control, they can be enabled and disabled. The TextBlock is no Control. Disabling a TextBlock would be meaningless. It just displays text. No user interaction possible.
If you need it to be grayed out you have to change either its Foreground color, or reduce its Opacity, or place a semi-transparent Rectangle/Border over it.
I have the following XAML:
<Window x:Class="ImageComparing.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="350" Width="525" xmlns:my="clr-namespace:ImageComparing" Title="Image comparing">
<DockPanel>
<ToolBar Name="toolbar1" DockPanel.Dock="Top" Height="41" Background="#FFA5D95A">
/*other content*/
</ToolBar>
<WrapPanel Name="wrapPanel1" >
/*other content*/
<Label Content="Label" Height="28" Name="label1" />
</WrapPanel>
</DockPanel>
</Window>
I want to add content to wrapPanel1 - I tried the following code:
if (info.Attributes == FileAttributes.Directory)
wrapPanel1.Children.Add(new FolderEntry(info.Name));
else
wrapPanel1.Children.Add(new FileEntry(info.Name));
For some reason, the items don't show up. How can I fix that problem?
You should to use some ItemsControl, then add/remove the items from the item source property. You can use the ItemsPanel property or changing the template. For instance, using a ListBox and setting the Template property:
<ListBox Grid.Row="2" ItemsSource="{Binding Items}">
<ListBox.Template>
<ControlTemplate>
<WrapPanel IsItemsHost="True"/>
</ControlTemplate>
</ListBox.Template>
</ListBox>
Now when you add or remove items from the Items property in your ViewModel/DataContext the item will be showed using the WrapPanel, and not the StackPanel that is the ListBox's default.
Hope this helps...
The question may sound a little confusing, but the problem I'm currently facing is this:
<Button x:Class="sandbox.BtnLabel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
x:Name="this">
<Button.ToolTip>
<TextBlock Background="Yellow" Text="{Binding ElementName=this, Path=LabelText}"/>
</Button.ToolTip>
<TextBlock Background="Yellow" Text="{Binding ElementName=this, Path=LabelText}"/>
</Button>
Only the second binding works, which sets the content of the button. The first one, which I would like to use to set the contents of the tooltip of the button (via the LabelText dependency property) does not work.
Is it possible to make the first binding work?
Thanks.
Try this:
<Button x:Class="sandbox.BtnLabel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Name="this">
<Button.ToolTip>
<ToolTip DataContext="{Binding Path=PlacementTarget, RelativeSource={RelativeSource Self}}">
<TextBlock Background="Yellow"
Text="{Binding LabelText}" />
</ToolTip>
</Button.ToolTip>
<TextBlock Background="Yellow"
Text="{Binding ElementName=this,
Path=LabelText}" />
</Button>
We add a ToolTip element and assign it's DataContext as it's PlacementTarget which should then reach the TextBlock
How to create a hovered toolbar?
Clicking to expand the ToolBar will not shrink the Canvas.
Expander works for expanding, but the canvas will get shrinked.
<UserControl x:Class="smartgrid.studio.View.GraphicEditorView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:model="clr-namespace:smartgrid.studio.Model"
xmlns:studio="clr-namespace:smartgrid.studio"
xmlns:metro="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
mc:Ignorable="d"
d:DesignHeight="1000" d:DesignWidth="1000">
<DockPanel>
<Expander DockPanel.Dock="left" Header ="Toolbar" FontSize="18" ExpandDirection="Up">
<TreeView Name="GraphicEditorEntityTree" Background="Transparent" BorderBrush="Transparent" ItemsSource="{Binding GraphicEditorEntities}"/>
</Expander>
<Canvas/>
</DockPanel>
</UserControl>
You can overlay things by putting them in a Grid without rows or columns, the sizing of your toolbar is an independent matter (you can still use an expander for that).
http://msdn.microsoft.com/en-us/library/system.windows.controls.panel.zindex.aspx
Panel.ZIndex might be the solution.
<Grid x:Name="LayoutRoot">
<Grid x:Name="Toolbar" Panel.ZIndex="1000" Visibility="Collapsed">
</Grid>
<canvas />
</Grid>