I'm trying to put an imagine inside a textblock inside a scrollviewer for my textblock. What I'm trying to accomplish is to have it as a background for my textblock and this is not even running. It compiles but it crashes.
<Image Source="Assets\picture.png" Margin="564,196,659,292" Grid.Row="1"/>
<ScrollViewer Height="645" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Left" Margin="330,113,0,0" Name="scrollViewer1" VerticalAlignment="Top" Width="627" Grid.RowSpan="2">
<TextBlock x:Name="tbl" VerticalAlignment="Top" Width="627" TextWrapping="Wrap" Foreground="White" FontFamily="Times New Roman" FontSize="22" >
</TextBlock>
I get to see the image on the designer but it crashes... Thanks!
Try this :
Using Grid or canvas we can place elements one over the other
<ScrollViewer x:Name="ScrollViewer">
<Grid>
<Image Source="Assets\picture.png" />
<TextBlock x:Name="TextBlock" />
</Grid>
</ScrollViewer>
Related
I'm new in XAML for Windows Phone 8.1 and have some troubles with
making a Stackpanel clickable
collapse Item, when clicked
My work so far looks like that:
And the Code to that (please correct me, if there are major flaws):
<Border CornerRadius="15" Background="#FF595656" Margin="0" Grid.ColumnSpan="2" Height="80">
<StackPanel Orientation="Horizontal">
<StackPanel Width="20" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel HorizontalAlignment="Left" Height="80" Margin="0,0,0,0" VerticalAlignment="Center" Width="51">
<Image HorizontalAlignment="Left" Height="51" Margin="0,15,0,0" Width="51" Source="Assets/fish.png" Stretch="Fill" RenderTransformOrigin="2.307,0.881" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Width="10" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel HorizontalAlignment="Left" Height="80" Margin="0" VerticalAlignment="Top" Width="310">
<TextBlock HorizontalAlignment="Left" Height="25" Margin="0,20,0,0" TextWrapping="Wrap" Text="Entry 1" Width="310" VerticalAlignment="Top" FontSize="18" Foreground="Black" FontWeight="Bold"/>
<TextBlock HorizontalAlignment="Left" Height="17" Margin="0" TextWrapping="Wrap" Text="Short description Entry 1" Width="310" VerticalAlignment="Top" Foreground="#FF0097FF"/>
</StackPanel>
</StackPanel>
</Border>
This code will later be wrapped inside a ListBox with Image, Entry 1 and the short description being bound:
<ListBox x:Name="ListBox1" Margin="0"
Width="400" Height="200" HorizontalAlignment="Left"
ItemsSource="{Binding}" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2" >
<ListBox.ItemTemplate>
<DataTemplate>
// the code above
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So my question is:
How can I make a nice looking expansion/collapse of each Item in the ListBox, whenever I click on it?
Thank you very much in advance.
The real question is here is what do you want it to collapse to? There are too many possible ways to collapse some visual data item. Do you just want to change the height of the item or do you want some fancy animation that collapse some property?
If the height is what you're looking for it's pretty easy. Just attach an Tap Event on that Border of yours. On a sidenote, you probably want to edit the ItemContainerStyle to have <Setter Property="HorizontalContentAlignment" Value="Stretch"/> so the Listbox will stretch across the screen, otherwise imho it's un-useable.
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Red" BorderThickness="0,1" Tap="Border_Tap">
<StackPanel>
<!--- rest of template --->
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
Then calculate the Minimum height you want to show (make sure it's actually useable, meaning... I can Tap on it again to show the whole thing without using a Mag Glass).
private void Border_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
int minHeight = 40; // change to whatever you want
Border b = sender as Border;
if (b.ActualHeight > minHeight)
{
b.Height = minHeight;
}
else
{
b.Height = double.NaN; // this will change the height back to Auto, showing everything
}
}
Code In Action
This is just a quick solution to your question. Some people on here would rather have you create a StoryBoard Animation on the Height Property of the Selected state in the VisualStateManager. If you reword or create a new question explicitly stating you want a VisualStateManager solution, I will provide you one as well. Good luck.
Here i am because I have a little problem. I want to add an border around my textblock. This is my current script (xaml):
<Grid>
<Border Visibility="Visible" Width="1000" BorderBrush="Blue" BorderThickness="1">
<TextBlock HorizontalAlignment="Left" Visibility="Visible" Foreground="Blue" TextAlignment="Center" FontSize="20" Margin="10,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="28.96" Width="980"><Run Language="fr-fr" Text="Fiche détails de la capitalisation"/></TextBlock>
</Border>
<TextBlock HorizontalAlignment="Left" Margin="10,49.05,0,0" TextWrapping="Wrap" VerticalAlignment="Top"><Run Language="fr-fr" Text="édité le:"/></TextBlock>
<TextBlock HorizontalAlignment="Left" Margin="390,49.05,0,0" TextWrapping="Wrap" VerticalAlignment="Top"><Run Language="fr-fr" Text="Rafraichissement des données:"/></TextBlock>
</Grid>
My problem is: even if i set the border property to the first textblock, it's applied to my whole Grid, and i haven't found why.
Is somebody know why?
Thanks in Advance.
Florian SELVA
You haven't defined any rows or columns in your Grid. It technically only has 1 column and 1 row, and your Border applies to that single row/column, so it appears to surround the entire Grid.
Since you're explicitly positioning your elements anyway, try replacing <Grid> with <Canvas>.
as a workaround in your current scenario try this way, I have moved the placement properties to the border instead of underlying textblock
<Grid>
<Border Visibility="Visible" BorderBrush="Blue" BorderThickness="1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="28.96" Width="980">
<TextBlock Visibility="Visible" Foreground="Blue" TextAlignment="Center" FontSize="20" TextWrapping="Wrap"><Run Language="fr-fr" Text="Fiche détails de la capitalisation"/></TextBlock>
</Border>
<TextBlock HorizontalAlignment="Left" Margin="10,49.05,0,0" TextWrapping="Wrap" VerticalAlignment="Top"><Run Language="fr-fr" Text="édité le:"/></TextBlock>
<TextBlock HorizontalAlignment="Left" Margin="390,49.05,0,0" TextWrapping="Wrap" VerticalAlignment="Top"><Run Language="fr-fr" Text="Rafraichissement des données:"/></TextBlock>
</Grid>
What you are trying to achieve is 1 text box on first line and 2 on second. unless you want to define your grid columns and rows you will have to use stackpanel and dock panel
the following by setting the grid width you control everything. All you need to change if you want spaceing in between the Edit and Refresh is a Top Margin on the dock panel someting like Margin="0,20,0,0" and if ou want space on the detail textblock and the border you should put a Padding on the border to prevent anything inside coming closer to value set.
<Grid Width="500">
<StackPanel>
<Border BorderBrush="Blue" BorderThickness="1">
<TextBlock Foreground="Blue" TextAlignment="Center" FontSize="20" TextWrapping="Wrap"><Run Language="fr-fr" Text="Fiche détails de la capitalisation"/></TextBlock>
</Border>
<DockPanel LastChildFill="True">
<TextBlock TextWrapping="Wrap" VerticalAlignment="Top"><Run Language="fr-fr" Text="édité le:"/></TextBlock>
<TextBlock TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Right"><Run Language="fr-fr" Text="Rafraichissement des données:"/></TextBlock>
</DockPanel>
</StackPanel>
</Grid>
I have a code like this
<Viewbox Grid.Row="1">
<controls:Tile Name="tileInvoice" Click="tileInvoice_Click" VerticalAlignment="Stretch" ToolTip="{x:Static resx:omniLang.Invoice}">
<controls:Tile.Background>
<ImageBrush ImageSource="Resources/invoice.png" Stretch="Uniform"/>
</controls:Tile.Background>
<TextBlock Name="headerInvoice" Text="{x:Static resx:omniLang.Invoice}" FontSize="22" Foreground="Black" FontWeight="Bold" VerticalAlignment="Center" Margin="0,100,0,0" />
</controls:Tile>
</Viewbox>
I would love to use solid color for background, still using png image on it. I'm so out of the ideas already. Should I use VisualBrush to achieve this?
Clearly, a Background property can only have one value, so you simply can't set two backgrounds to the same property. However, there is nothing to stop you from putting your control into a container control and setting the Background property of that as well:
<Viewbox Grid.Row="1">
<Grid Background="Red"> <!-- Set your solid colour here -->
<controls:Tile Name="tileInvoice" Click="tileInvoice_Click" VerticalAlignment="Stretch" ToolTip="{x:Static resx:omniLang.Invoice}">
<controls:Tile.Background>
<ImageBrush ImageSource="Resources/invoice.png" Stretch="Uniform"/>
</controls:Tile.Background>
<TextBlock Name="headerInvoice" Text="{x:Static resx:omniLang.Invoice}" FontSize="22" Foreground="Black" FontWeight="Bold" VerticalAlignment="Center" Margin="0,100,0,0" />
</controls:Tile>
</Grid>
</Viewbox>
i am new to windows phone development,..
So i am preparing an application in that i given Background Color as white for every page..
in my app i added a search so that user can search data using two text Box..
In that I have given Bg color as white and foreground Color as black.. in that TextBlock is Viable But TextBox are not Visable they are mixing in background...
This is My xaml fiel..
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Margin="10,114,10,311">
<TextBlock Text="Enter Name"
TextWrapping="Wrap"
Tap="TextBlock_Tap"
Foreground="Black" />
<TextBox x:Name="Enter Name Field"
GotFocus="TextBox_GotFocus"
LostFocus="TextBox_LostFocus"
Foreground="RosyBrown" Height="46" Margin="27,0,56,0" />
<TextBlock Text="Enter A Model number"
TextWrapping="Wrap"
Tap="TextBlock_Tap"
Foreground="Black"/>
<TextBox x:Name="Enter A Model number Field"
GotFocus="TextBox_GotFocus"
LostFocus="TextBox_LostFocus"
Foreground="RosyBrown" Height="46" Margin="27,0,56,0" />
</StackPanel>
</Grid>
Sorry i want to add a Image Button also i tried....
i want it like this
This may help you.
<Grid Grid.Row="1" Background="White">
<StackPanel Margin="10,114,10,311">
<TextBlock Text="Enter Name"
TextWrapping="Wrap"
Tap="TextBlock_Tap"
Foreground="Black" />
<TextBox x:Name="Enter Name Field"
GotFocus="TextBox_GotFocus" BorderBrush="Gray" BorderThickness="2"
LostFocus="TextBox_LostFocus"
Foreground="RosyBrown" Height="46" Margin="27,0,56,0" />
<TextBlock Text="Enter A Model number"
TextWrapping="Wrap"
Tap="TextBlock_Tap"
Foreground="Black"/>
<TextBox x:Name="Enter A Model number Field"
GotFocus="TextBox_GotFocus"
LostFocus="TextBox_LostFocus" BorderBrush="Gray" BorderThickness="2"
Foreground="RosyBrown" Height="46" Margin="27,0,56,0" />
<Image Height="40" Width="150" Source="your image path" Tap="Image_tap" />
</StackPanel>
</Grid>
add Background="Black" (or whatever color you want) in all your TextBox.
For that what you have shown use BorderBrush="Black", decrease the border thickness if you need to. Yes, you can add a image button, use a image as your button background.
<Button>
<Button.Background>
<ImageBrush Source="your_file.jpg" Stretch="Fill"/>
</Button.Background>
</Button>
Note: It is not a good idea to write x:Name value with spaces. what you write in x:Name ultimately become a variable name of type TextBox (in this case) and c# doesn't permit variable name with space, So just delete the spaces and use x:Name="Enter_A_Model number_Field" or simply x:Name="EnterAModelNumberField"
Use your textbox surrounded with border, since you are using a white background.I think below code may help you to get an idea.
<Border BorderThickness="1" Grid.Row="2" Name="brdUsrName" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="60" Background="Black">
<TextBox Name="txtUserName" Margin="-10,-10,-10,-10" />
</Border>
In my ListBox I show different content including text. Text can be long or short. It scrolls by ScrollViewer. Code:
<ScrollViewer MaxHeight="300" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1" >
<TextBlock Style="{StaticResource TextsTextBlock}" Text="{Binding Texts}" Grid.Column="1" Grid.Row="1" />
</ScrollViewer>
and it's also working if text is short, and height of this text do not reach MaxHeight of ScrollViewer. I want to make ScrollViewer works only when text is long and it's height greater than ScrollViewer's MaxHeight, else - it doesn't have to work.
Tried border
<Border BorderBrush="Aqua" BorderThickness="2" MaxHeight="300" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1">
<ScrollViewer VerticalAlignment="Top" VerticalScrollBarVisibility="Auto" >
<TextBlock Style="{StaticResource TextsTextBlock}" Text="{Binding Texts}" Grid.Column="1" Grid.Row="1" />
</ScrollViewer>
</Border>
but it's still scrolls in this border.
Set the VerticalScrollBarVisibility property to Auto.
The default value is Visible which means that the scroll bar is always shown.
By contrast the HorizontalScrollBarVisibility property has a default value of Hidden.
Try removing some of the Grid. properties from the inner controls
<Border BorderBrush="Aqua" BorderThickness="2" MaxHeight="300" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" >
<TextBlock Text="text" TextWrapping="Wrap"/>
</ScrollViewer>
</Border>
this works fine with one line of text
If I copy paste your code it works fine