So, I am trying to develop app in WPF (again). I wanted to have nice, black border with rounded corenrs around my StackPanel. In order to do this I have written:
<Border x:Name="debugPanel" CornerRadius="10" BorderBrush="Black" BorderThickness="2" Grid.Row="5" Grid.Column="6" Grid.RowSpan="2">
<StackPanel Grid.RowSpan="3" Background="#C7C7C7">
<!--contents-->
</StackPanel>
</Border>
But the result is ugly :( See below picture:
Note that it even might be wrong way of adding a border, I just figured it out myself. So if you have any recommendations and remarks, I would gladly hear them out as well.
Set the background on the border instead of the StackPanel:
<Border x:Name="debugPanel" Background="#C7C7C7" CornerRadius="10" BorderBrush="Black" BorderThickness="2" Grid.Row="5" Grid.Column="6" Grid.RowSpan="2">
<StackPanel Grid.RowSpan="3" Background="Transparent">
<!--contents-->
</StackPanel>
</Border>
Related
I have a little question. I'm new to WPF and a strange thing happened to me. In the designer everything looks fine, but as soon as I start the application, a piece ,,cuts off"(via.photo) and it looks pretty bad. Could it be that the application is not responsive?
My XAML code:
<TabItem Header="TabItem"
Visibility="Hidden"
x:Name="Home_Page"
Background="{x:Null}"
BorderBrush="{x:Null}" Height="Auto"
Width="Auto"
>
<Border
Background="Black"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="1340"
Height="1100"
CornerRadius="20"
>
<Border
Background="White"
CornerRadius="20"
Height="700"
Width="500"
Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center"
>
<Grid
>
<TextBlock
Text="Welcome"
Width="200"
Height="200"
Foreground="Black"
FontSize="50" FontFamily="/Peel_App;component/Fonts/#Kashima Brush Demo"
>
</TextBlock>
</Grid>
</Border>
</Border>
</TabItem>
After what I edited app:
Your code has a few issues:
You're hardcoding the Margin values to position your controls. Instead, you should use proper panels (DockPanel, WrapPanel, and Grid). Use Margin property to set margin, not a position.
Use HorizontalAlignment and VerticalAlignment properties to position your elements, thus your UI would be more responsive and user-friendly.
To be able to view, how your window and its content would look like - try to set d:DesignHeght and d:DesignWidth properties on a window. Try to Google how to use them.
In the end, your code should look like following:
<TabItem Header="TabItem"
Visibility="Hidden"
x:Name="Home_Page"
Background="{x:Null}"
BorderBrush="{x:Null}"> <!-- Properties order is a bit confusing, it is better to order them by priority, or just alphabetically. -->
<Border Background="Black">
<Border Background="White"
CornerRadius="20"
Margin="0,0,93,118"> <!-- Should it have such values? Maybe just somenthing like Margin="0 0 90 120"? -->
<Grid>
<TextBlock Text="Welcome"
Foreground="Black"
FontSize="50"
FontFamily="/Peel_App;component/Fonts/#Kashima Brush Demo"/>
</Grid>
</Border>
</Border>
</TabItem>
I am trying to make a really simple editor for images. Since the control panel is showed right next to the Canvas, I'd like to put a border between them (I am open to suggestions like a GridSplitter though). I have the Canvas nested in a ScrollViewer nested in a Border. When the image loads in the Canvas, if I resize the window I the image resizes with everything else. Since I am editing this image, I'd like to keep it to its original size and, if the Canvas is to big, use the ScrollViewer to handle that. I don't know if it is more recommendable to put the border around the Control Panel instead.
XAML Code:
<Border BorderBrush="Black" BorderThickness="2" Grid.Column="2" Grid.Row="0" Grid.RowSpan="10" Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ScrollViewer x:Name="canvas_RosetteMap" Height="Auto" Width="Auto" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<Canvas Grid.Column="2" HorizontalAlignment="Center" Height="Auto" Grid.Row="0" Grid.RowSpan="10" VerticalAlignment="Center" Width="Auto"/>
</ScrollViewer>
</Border>
You should use a Grid instead. Canvas are not good at handling resizing, scrolling or anything like that. Here is a simple example that should work with an Image also:
<Border BorderBrush="Black" BorderThickness="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ScrollViewer x:Name="canvas_RosetteMap" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Visible">
<Grid Width="Auto">
<TextBox Background="Beige" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</Grid>
</ScrollViewer>
</Border>
I want to include an image directly into a ComboBox template.
I found this part of the code and I believe it is here where I would put it:
<Button x:Name="FlyoutButton" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" FontWeight="Normal" FlowDirection="{TemplateBinding FlowDirection}" FontSize="{ThemeResource ContentControlFontSize}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" MinHeight="{ThemeResource ComboBoxItemMinHeightThemeSize}" Padding="6.5,0,0,0" Grid.Row="1">
<ContentPresenter x:Name="ContentPresenter" Margin="0,0.8,0,0" MinHeight="32.5">
<TextBlock x:Name="PlaceholderTextBlock" Margin="0" Style="{StaticResource ComboBoxPlaceholderTextBlockStyle}" Text="{TemplateBinding PlaceholderText}"/>
</ContentPresenter>
</Button>
I can't put an Image inside contentPresenter because it says I can only set 'Content' once.
If I make something like:
<ContentPresenter x:Name="ContentPresenter" Margin="0,0.8,0,0" MinHeight="32.5">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="PlaceholderTextBlock" Margin="0" Style="{StaticResource ComboBoxPlaceholderTextBlockStyle}" Text="{TemplateBinding PlaceholderText}"/>
<Image Source="ms-appx:///Assets/Arrow.png" />
</StackPanel>
</ContentPresenter>
It actually works but I get an error in my XAML view page: "No installed components were detected. Cannot resolve TargetName PlaceholderTextlock.". And also the image disappears after I select an item.
I'd appreciate some guidance.
I believe you want to set the items inside the combo box to have the image with the textblock. In that case you need to set the ItemTemplate of the combobox like this
<ComboBox Name="hik" ItemTemplate="{StaticResource cmbx}">
And in your page resources you can define the item template for combo box items like this
<DataTemplate x:Key="cmbx">
<StackPanel Orientation="Horizontal" Background="Aqua">
<TextBlock HorizontalAlignment="Left" Margin="0,0,0,0" Foreground="Black" TextWrapping="Wrap" Text="Some Text" VerticalAlignment="Top"/>
<Image Source="/Assets/1.png" Stretch="Uniform" Height="100" Width="100" />
</StackPanel>
</DataTemplate>
Once that is done when you run it on clicking the combobox you can see the list with image
Hope this helps!
I have a listbox with objects but I cannot scroll to the bottom of the page. What is the problem? This is the code that I'm using.
<Grid>
<Image Name="Nietcomment" Source="write.png" Width="70" Margin="350,-850,0,0" Tap="Login_popup" Visibility="Visible"/>
<Image Name="welcomment" Source="write2.png" Width="70" Margin="350,-850,0,0" Tap="Login_popup_remove" Visibility="Collapsed"/>
<ScrollViewer Name="scrollview" VerticalScrollBarVisibility="Visible" Margin="0,0,0,0" Foreground="Black">
<StackPanel>
<TextBlock x:Name="NTitelComment" Text="{Binding}" TextWrapping="Wrap" FontSize="25" Margin="10,0,10,0" Foreground="#FFE5001b"/>
<Line Stretch="Fill" Stroke="Black" X1="0" X2="1" Y1="0" Y2="0" Margin="10,0,10,0"/>
<TextBlock x:Name="tijdComment" Text="{Binding}" Margin="50,0,10,0" Foreground="Black"/>
<Image Height="20" Width="20" Margin="-380,-20,0,0" Source="/PostDateIcon.png"/>
<ListBox Margin="0,0,0,20" Name="lbComments" VerticalAlignment="Top" />
</StackPanel>
</ScrollViewer>
</Grid>
If you put a border around your ScrollViewer, can you see if it goes outside of the screen maybe? Will it help to set a fixed height of the Grid or ScrollViewer?
Keep in mind the phone has built in scroll, so your ScrollViewer maybe doesn't play well with it.
With so much fixed margins, your layout will be impossible to manage, especially when dealing with differents screen resolutions and especially with negative margins.
Anyway, right now, you have two scrollviewers, as your listbox contains one as well.
You should disable the listbox scrollviewer or it will prevent your page to scroll.
Just change your listbox:
<ListBox
Margin="0,0,0,20"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
Name="lbComments"
VerticalAlignment="Top" />
It will disable it's scrollviewer and allow it to scroll with the rest of the page.
I have the following XAML code, which displays a picture (image inside borders) and a logo. Right now, the logo appears below the picture. This is expected, however my goal is to have the logo on top of the picture (precisely at the bottom-right corner). Does someone has an idea how to do that? Do we have layers in WPF?
Note: I absolutely need to keep the WrapPanel.
<WrapPanel>
<Border BorderBrush="Gray" BorderThickness="1" Margin="3">
<Border BorderBrush="White" BorderThickness="3">
<Border BorderBrush="LightGray" BorderThickness="0.5">
<Image Source="http://farm1.static.flickr.com/2/1703693_687c42c89f_s.jpg" Stretch="Uniform" />
</Border>
</Border>
</Border>
<Image Source="http://l.yimg.com/g/images/flickr_logo_gamma.gif.v59899.14" Height="10" />
</WrapPanel>
You should be able to do something along the lines of:
<WrapPanel>
<Grid>
<Border BorderBrush="Gray" BorderThickness="1" Margin="3">
<Border BorderBrush="White" BorderThickness="3">
<Border BorderBrush="LightGray" BorderThickness="0.5">
<Image Source="http://farm1.static.flickr.com/2/1703693_687c42c89f_s.jpg" Stretch="Uniform" />
</Border>
</Border>
</Border>
<Image Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom" Source="http://l.yimg.com/g/images/flickr_logo_gamma.gif.v59899.14" Height="10" />
</Grid>
</WrapPanel>
By not specifying any rows or columns our grid places the 2 items in row 0 column 0 and stacks them on top of each other. The second image has Horizontal and Vertical alignment set to make it appear in the bottom right, and I've added a margin to the 2nd image to bump it up a bit, otherwise it sits on the border which I assume is not what you wanted?
Put your picture and logo in a Canvas element and position them (Canvas.Top, Canvas.Left, etc) as needed.