I am trying to create a ListViewItem template which looks like this, but i'm not making much headway.
Here is the style I have created so far:
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Border HorizontalAlignment="Stretch" Margin="1.5" CornerRadius="5" BorderThickness="1,1,1,1" BorderBrush="#FF997137">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF4B4B4B" Offset="0" />
<GradientStop Color="#FF8F8F8F" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<StackPanel Orientation="Horizontal" >
<Image HorizontalAlignment="Left" Width="32" Source="/Images/stop.png" Stretch="Fill" Height="32" />
<TextBlock Foreground="#FFECAD25" TextWrapping="Wrap" Width="150" >
This is a user control. The animation uses the attached BalloonShowing event.
</TextBlock>
<StackPanel Orientation="Vertical" >
<Image HorizontalAlignment="Right" Margin="0,10,5,0" VerticalAlignment="Top" Width="16" Height="16" Source="/Images/Close.png" Stretch="Fill"
Opacity="0.4" ToolTip="Delete" x:Name="Delete" />
<Image HorizontalAlignment="Right" Margin="0,5,5,0" VerticalAlignment="Top" Width="16" Height="16" Source="/Images/Close.png" Stretch="Fill"
Opacity="0.4" ToolTip="Edit" x:Name="Edit" />
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
Is it possible to extend the text below the image/icon?
I don't believe there is any out-of-the box way to do this with a `TextBlock'.
However, if you are able to use the FlowDocument control, here are some options: answer 1, answer 2.
As far I know, no. Not atleast with simple Image and TextBlock.
FlowDocument seems to be good solution though,
check out this link for further information:
http://dotnetslackers.com/articles/wpf/WPFFlowDocumentsAndImages.aspx
Related
I need the progress bar which shows both the dot followed by icon after some regular intervals.
I am working on the camera module,when the snap is taken i need to show dot in the progress bar,which show the snap is taken.
Then this snap is passed to the algorthim and it retuns boolen value,then i need to show icon.
if the duration is 1 minutes and the interval is 30 sec ,then in the progress bar control i need to show two dot and two icon in the progress bar.
Please provide me some solutions,below is the XAMl
XAML For the Progress bar
<Window.Resources>
<Style x:Key="ProgressBarStyle" TargetType="ProgressBar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Border BorderBrush="#BBC6C4" BorderThickness="1" CornerRadius="5" Padding="1">
<Grid x:Name="PART_Track" >
<Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF1D5666" Offset="1"/>
<GradientStop Color="#FF09B6FF"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Ellipse x:Name="progressdot" HorizontalAlignment="Left" Margin="73,7,0,0" Stroke="#FFA8A49B" Width="8" Height="8"
VerticalAlignment="Top" Grid.Row="1" />
<Image x:Name="imgAcetowhiteness" Margin="89,7,0,0" Source="..\acetowhiteness.png"
Stretch="Fill" Width="15" Height="15" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top" />
<Ellipse x:Name="progressdot1" HorizontalAlignment="Left" Margin="180,7,0,0" Stroke="#FFA8A49B" Width="8" Height="8"
VerticalAlignment="Top" Grid.Row="1" />
<Image x:Name="imgAcetowhiteness1" Margin="195,7,0,0" Source="..\acetowhiteness.png"
Stretch="Fill" Width="15" Height="15" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<StackPanel Orientation="Vertical">
<ProgressBar x:Name="PBarone" Margin="48,10,10,10" Style="{StaticResource ProgressBarStyle}"/>
<ProgressBar x:Name="PBartwo" Margin="48,20,10,10" Style="{StaticResource ProgressBarStyle}"/>
<ProgressBar x:Name="PBarthree" Margin="48,30,10,10" Style="{StaticResource ProgressBarStyle}"/>
</StackPanel>
</Grid>
Im trying to create a stackpanel with a rounded background, that also has a linearbrush from grey to trasparent
I used the ideas exposed here to prevent clipping
http://chriscavanagh.wordpress.com/2008/10/03/wpf-easy-rounded-corners-for-anything/
The problem now is that the text inside the stackpanel also has degradation and then turns invisible
any help?
Similar question
How do I create a WPF Rounded Corner container?
Code:
<Border Margin="235,78,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"
BorderBrush="Red" BorderThickness="1" CornerRadius="8" >
<Grid>
<Border Name="mask" CornerRadius="7">
<Border.Background>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="Gray" Offset="0"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<StackPanel Orientation="Horizontal" >
<StackPanel.OpacityMask>
<VisualBrush Visual="{Binding ElementName=mask}"/>
</StackPanel.OpacityMask>
<Image Height="16" Width="16" RenderOptions.BitmapScalingMode="NearestNeighbor" />
<TextBlock Foreground="Black" Margin="5,0,3,0" Text="00620"/>
<TextBlock Foreground="Black" Margin="5,0,3,0" Text="Error sincronización" />
</StackPanel>
</Grid>
</Border>
This is due to the OpacityMask, try to remove these lines from your XAML:
<StackPanel.OpacityMask>
<VisualBrush Visual="{Binding ElementName=mask}"/>
</StackPanel.OpacityMask>
And it should work
Hi
I have created a popup using Popup class in silverlight. I wrote a class of type UserControl and I added this usercontrol to the popup by using Child method of Popup class.
Following is the XAML code of my UserControl class
<UserControl x:Class="MyProject.PopupWindowContent"
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"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}" UseLayoutRounding="False" Cursor="Hand">
<Grid Height="355" Name="grid1" Width="527.5">
<Image Height="355" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="527" Source="/MyProject;component/dialog_bg.png" UseLayoutRounding="True" />
<Image Height="194" HorizontalAlignment="Left" Margin="13,87,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="502.5" Source="/MyProject;component/dialog_box_1.png" />
<Image Height="46" HorizontalAlignment="Left" Margin="25.25,35.25,0,0" Name="image3" Stretch="Fill" VerticalAlignment="Top" Width="49.75" Source="/MyProject;component/dialog_logo.png" />
<TextBlock Height="40" HorizontalAlignment="Left" Margin="153.25,38.75,0,0" Name="popupHeading" Text="TextBlock" VerticalAlignment="Top" Width="212" TextAlignment="Center" FontWeight="Bold" FontSize="26" />
<Button Content="Submit" Height="71" HorizontalAlignment="Left" Margin="130.75,265.75,0,0" Name="buttonOne" VerticalAlignment="Top" Width="132.25" BorderThickness="1" FontSize="18" Foreground="Black">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="#FF06EF06" Offset="1" />
</LinearGradientBrush>
</Button.Background>
</Button>
<Button BorderThickness="1" Content="Cancel" FontSize="18" Foreground="Black" Height="71" HorizontalAlignment="Right" Margin="0,265.75,142,0" Name="buttonTwo" VerticalAlignment="Top" Width="132.25">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="#FFEF0606" Offset="1" />
</LinearGradientBrush>
</Button.Background>
</Button>
<TextBox Height="162.75" HorizontalAlignment="Left" Margin="18,108.25,0,0" Name="popupBody" Text="TextBox" VerticalAlignment="Top" Width="480.5" Background="{x:Null}" FontSize="20" Foreground="White" BorderThickness="0" />
</Grid>
I set this PopupWindowContent to my popup using following code in my xaml file
Popup popUnWin = new Popup();
popUnWin.Child = new PopupWindowContent();
popUnWin.IsOpen = true;
Problem is that when I execute this code, popup orientation is according to portrait but my app is landscape. So popup looks 90 degrees rotated.
Can anyone please tell me how can i fix it?
Best Regards
I found that if you put the popup into the xaml code of the page, then the orientation is done properly.
Are you setting SupportedOrientation on every page of your app or just the first? I think there's a wierd thing that if you set it on your first page, some things will respect it, but others (like the popup) look at the supported orientations of the active page?
I've seen some suggestions of adding the popup to the visual tree. I tried adding it to my xaml and it still didn't rotate, but you might want to give it a shot.
Do not rotate the popup but place a border inside the popup and load the content in the border.
I got it to work like this:
//In .xaml
<Popup x:Name="myPopup">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="480" />
</Grid.RowDefinitions>
<Border x:Name="popupBorder"/>
</Grid>
</Popup>
//In .xaml.cs
popupBorder.Child = new MyPopupPage(); //MyPopupPage is the "Windows Phone Landscape Page"
myPopup.IsOpen = true;
I am using silvelight listbox control,and i stucked.Every listbox item contains another listbox item now when i bind my data second listbox control,it appears horizontal scrollbar and this is not a problem i can remove it.How can do when I add new Item to second listbox,its height automatically increase?
For a second listbox Height=Auto dont work because its scrolling.
is that possible?
Thx.
Here is XAML code:
<DataTemplate x:Key="VesselListItem">
<Border Height="Auto" HorizontalAlignment="Left" Margin="0" Name="border1" VerticalAlignment="Top" Width="271" CornerRadius="7" BorderThickness="2">
<Grid Name="grid1" Width="Auto">
<TextBlock Height="23" HorizontalAlignment="Left" Margin="6,1,0,0" Name="textBlock1" Text="BOSPOROTUES PIRATES" VerticalAlignment="Top" FontWeight="Normal" FontSize="14" Width="197" Foreground="#FFF9DD06" >
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="2" BlurRadius="2" Direction="338"/>
</TextBlock.Effect>
</TextBlock>
<Rectangle Canvas.ZIndex="-1" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" Name="rectangle1" Stroke="Black" StrokeThickness="2" Width="Auto" RadiusX="7" RadiusY="7" Opacity="0.15" Fill="White" />
<c1ext:C1Expander Height="Auto" HorizontalAlignment="Left" Margin="6,22,5,10" Name="c1Expander1" VerticalAlignment="Top" Width="255" IsExpanded="True">
<Grid HorizontalAlignment="Stretch" Name="grid6" VerticalAlignment="Stretch" ShowGridLines="False" Height="50">
<ListBox Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="listBox1" VerticalAlignment="Stretch" Width="Auto" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBoxItem Content="sdfgdsfgdsfg" />
<ListBoxItem Content="sdfhsdfhdsfh" />
<ListBoxItem Content="sdfhsdfhsdfh" />
<ListBoxItem Content="sdfhsdfhsdfh" />
<ListBoxItem Content="sdfhdsfhsdfh" />
<ListBoxItem Content="sdfhdsfhd" />
<ListBoxItem Content="tttttttttt" />
</ListBox>
</Grid>
</c1ext:C1Expander>
</Grid>
<Border.BorderBrush>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#9FFFFFFF" Offset="0" />
<GradientStop Color="White" Offset="0.654" />
<GradientStop Color="#4A408B9D" Offset="0.423" />
<GradientStop Color="#BA002D76" Offset="1" />
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
</DataTemplate>
Try setting the "MaxHeight" property of your ListBox. Then your ListBox height should adjust accordingly until the MaxHeight is achieved and then the scrollbar will appear.
Does anyone know of a place to download pre-built or defined silverlight (2.0/3.0) shapes?
It sounds like you need to get a feel for Xaml - maybe these tutorials would help: http://silverlight.net/learn/videocat.aspx?cat=2#HDI2Controls
The site silverzine.com also has some good Xaml how-tos. The specific instance you commented on, like a a rectangle with rounded edges and a bullet list could be constructed like this:
<Border CornerRadius="20" BorderThickness="4" Width="400" Height="300" BorderBrush="Black">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Black" Offset="0.0" />
<GradientStop Color="White" Offset="1.0" />
</LinearGradientBrush>
</Border.Background>
<StackPanel Margin="10" Orientation="Vertical">
<ListBox Height="200">
<ListBox.Items>
<StackPanel Orientation="Horizontal">
<Ellipse Width="10" Height="10" Stroke="Black" StrokeThickness="15" Fill="Black"/>
<TextBlock Margin="10,4,0,0" Text="Item 1"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Ellipse Width="10" Height="10" Stroke="Black" StrokeThickness="15" Fill="Black"/>
<TextBlock Margin="10,4,0,0" Text="Item 2"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Ellipse Width="10" Height="10" Stroke="Black" StrokeThickness="15" Fill="Black"/>
<TextBlock Margin="10,4,0,0" Text="Item 3"/>
</StackPanel>
</ListBox.Items>
</ListBox>
<Button Margin="10" Content="Click Me!"/>
</StackPanel>
</Border>
To answer the question, I don't know of a site that has examples that the one you said you were looking for. I think a good strategy would be to narrow down your search a bit and tackle one thing at a time. Start with the border, then look around for gradients, etc. Good luck!