Wie erstelle ich in C# Wpf einen Runden ToggleButton?

Ich möchte einen ToggleButten erstellen, der einen runden Rand hat und seine Breite automatisch anpasst.

Mein Code bisher:

Style:

<Style TargetType="ToggleButton" x:Key="favorite_btn">
            <Setter Property="Height" Value="30"/>
            <Setter Property="Width" Value="Auto"/>
            <Setter Property="Background" Value="Red"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Margin" Value="60,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border BorderBrush="{TemplateBinding Background}" BorderThickness="1" CornerRadius="20">
                            <StackPanel Orientation="Horizontal" Background="Red">
                                <Image Height="20" Width="20" Source="{Binding Path=Image}" VerticalAlignment="Center" Margin="5,0,0,0"/>
                                <TextBlock Text="{Binding Path=Text}" Foreground="White" FontSize="20" Margin="5,0" VerticalAlignment="Center" Width="Auto"/>
                            </StackPanel>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

und

<ToggleButton DockPanel.Dock="Top" x:Name="favorite_btn" Style="{StaticResource favorite_btn}" Checked="favorite_btn_Checked" Unchecked="favorite_btn_Unchecked" />

Jedoch bekomme ich am Ende folgendes heraus:

Bild zum Beitrag

Herauskommen soll aber:

Bild zum Beitrag

Was mach ich falsch?

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, programmieren, C Sharp

02.09.2020, 05:45

Gib nicht dem StackPanel eine Hintergrundfarbe, sondern dem Border.

<Border Background="Red" BorderBrush="{TemplateBinding Background}" BorderThickness="1" CornerRadius="20">
  <StackPanel Orientation="Horizontal">
    <!-- ... -->

Twitchers04

Fragesteller

02.09.2020, 13:27

Danke, der ToggleButton ist jetzt zumindest schon mal rund, aber er nimmt in der Breite immer noch den maximalen Platzt ein. Weißt du auch wie man dieses Problem lösen kann?

Twitchers04

Fragesteller

02.09.2020, 13:32

@Twitchers04

Hab es soeben herausgefunden. Ich muss statt DockPanel.Dock="Top" DockPanel.Dock="Left" angeben, damit es am ende so aussieht wie ich ess will

regex9

02.09.2020, 13:47

@Twitchers04

Die Breite sollte eigentlich über das Layout dynamisch berechnet werden. Das heißt, dieser Setter:

<Setter Property="Width" Value="Auto"/>

könnte raus und eigentlich auch die Breitenangabe beim Textblock. Mittels eines Grids kann die Breite schließlich bestimmt werden.

Beispiel:

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="0.2*"></ColumnDefinition>
    <ColumnDefinition Width="0.8*"></ColumnDefinition>
  </Grid.ColumnDefinitions>

  <ToggleButton DockPanel.Dock="Top" x:Name="favorite_btn" Style="{StaticResource favorite_btn}" Checked="favorite_btn_Checked" Unchecked="favorite_btn_Unchecked" />
</Grid>

Ansonsten würde die Breite direkt auf dem ToggleButton (oder dem Setter in der Style Ressource) gesetzt werden. Beachte, dass du derzeit noch einen Margin gesetzt hast, der die Breite mit beeinflussen kann.

Ich habe ein DataGrid bei dem ich mit MVVM die Daten beziehe. Jetzt habe ich es so gemacht das wenn ich diesen Button drücke:

<TextBlock Text="&#xE71C;" x:Key="DataGridSelectAllButtonStyle.Content"/>
                <Style x:Key="{ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}"
                    TargetType="{x:Type Button}">
                    <Setter Property="Background" Value="Gray"/>
                    <Setter Property="BorderBrush" Value="White"/>
                    <Setter Property="BorderThickness" Value="0 0 1 0"/>
                    <EventSetter Event="Click" Handler="ClearButton_Click"/>
                    <Setter Property="Content">
                        <Setter.Value>
                            <StackPanel Background="Gray" Height="40" Width="11">
                                <Separator Background="White" Margin="0,17,-1,0"/>
                                <TextBlock Background="{x:Null}" HorizontalAlignment="Center" Height="13"  Margin="0 5 0 0"
                            FontFamily="Segoe MDL2 Assets" FontWeight="Light" FontSize="7"
                            Text="{Binding Text, Source={StaticResource DataGridSelectAllButtonStyle.Content}}">
                                </TextBlock>
                            </StackPanel>
                        </Setter.Value>
                    </Setter>
                </Style>

Und meine TextBoxen nicht leer sind sie dann automatisch geleert werden. Wenn jedoch die TextBoxen nicht leer sind und ich denn Button noch nicht gedrückt habe soll sich der Content von dem Button ändern zu einem Kreuz. Das habe ich bereits jedoch nur bedingt geschafft denn jetzt ist es bei mir so das nur wenn ich auf denn Button Clicke der Content geändert wird und nicht automatisch sobald er erkennt die TextBoxen sind nicht mehr leer. Also mein Ziel ist es das wenn die TextBoxen leer sind das standard Symbol (Content) angezeigt wird und sobald eine der TextBoxen nicht mehr leer sind soll sich der Button Content automatisch in ein Kreuz ändern und nicht wie jetzt das es nur manuell über das Klicken auf den Button funktioniert und sobald alle TextBoxen wieder leer sind soll das Anfangs Symbol(Content gezeigt werden). Und hier ist erstmal mein Code Behind womit ich denn Button content per Click event ändere:

private void ClearButton_Click(object sender, RoutedEventArgs e)
        {
            if (!String.IsNullOrEmpty(IDSearcBox.Text))
            {
                if (sender is FrameworkElement element)
                {
                    TextBlock textBlock = (TextBlock)element.FindResource("DataGridSelectAllButtonStyle.Content");
                    textBlock.Text = textBlock.Text == "\xE711"
                        ? "\xE71C"
                        : "\xE711";
                }
            }
        }

...zur Frage

Wie kann ich in WPF diese Weißen Felder entfernen?

Guten tag ich habe in meinem WPF Programm jetzt irgendwie solche weißen Felder:

Also das ganz links und das zwischen dem Header und denn Cells,wie kriege ich die Weg?

Mein Code:

<StackPanel Orientation="Vertical" Background="Red">
        <DataGrid Height="438" x:Name="data" Width="801" >
            <DataGrid.Resources>
                <Style TargetType="{x:Type DataGridColumnHeader}">
                    <Setter Property="Background" Value="#292F3B"/>
                    <Setter Property="Foreground" Value="LightBlue"/>
                    <Setter Property="FontWeight" Value="SemiBold"/>
                    <Setter Property="Height" Value="30"/>
                    <Setter Property="FontSize" Value="15"/>
                    <Setter Property="BorderThickness" Value="0,0,2,0" />
                    <Setter Property="BorderBrush" Value="#333333"/>
                    <Setter Property="Padding" Value="10 0 0 0"/>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="#454F5D"/>
                        </Trigger>
                    </Style.Triggers>
                    
                </Style>
                <Style TargetType="{x:Type DataGrid}">
                    <Setter Property="Background" Value="#20262E"/>
                </Style>


                <Style TargetType="{x:Type DataGridCell}">
                    <Setter Property="Background" Value="#292F3B"/>
                    <Setter Property="Foreground" Value="LightBlue"/>
                    <Setter Property="BorderThickness" Value="0,0,2,0" />
                    <Setter Property="BorderBrush" Value="#333333"/>
                    <Setter Property="Margin" Value="0 5 0 0"/>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="#454F5D"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </DataGrid.Resources>
            
            
            
            <DataGrid.Columns>
                <DataGridTextColumn Header="user" Binding="{Binding user}"   Width="*"/>
                <DataGridTextColumn Header="User1" Binding="{Binding user1}" Width="*"/>
                <DataGridTextColumn Header="User2" Binding="{Binding user2}" Width="*"/>
                <DataGridTextColumn Header="User3" Binding="{Binding user3}" Width="*"/>
                <DataGridTextColumn Header="User4" Binding="{Binding user4}" Width="*"/>
            </DataGrid.Columns>
        </DataGrid>
    </StackPanel>

...zur Frage

[MVVM] Canvas Background Image via Slider ändern?

Hallo.

Ich hatte eigentlich nicht vor wegen der Sache was zu fragen, aber hab das Gefühl, ich verfolge den falschen Weg.

Wie der Name schon sagt, möchte ich mittels einer Sliderbewegung die Bilder in einem Canvas ändern.

Meine Denkweise sah so aus:

  <Slider x:Name="mySlider" HorizontalAlignment="Left" Height="58" Margin="209,948,0,0" VerticalAlignment="Top" Width="407" Minimum="0" Maximum="15"
        TickFrequency="1" TickPlacement="TopLeft" IsSnapToTickEnabled="True" ValueChanged="sliderChangeValue"/>

An diesen Slider ist ein ChangeValue-Event angehängt, dass eine BitmapImage Property ändert.

Jetzt habe ich noch ein ItemsControl mit einem Canvas darin, in dem die Bilder dargestellt werden sollen.

  <ItemsControl x:Name="canvas2" Margin="209,678,1012,124.8" Background="#FFC4C4C4" ItemsSource="{Binding LoadFieldMapsFIELDcol}">
            <Canvas>
                <Canvas.Background>
                    <ImageBrush ImageSource="{Binding BitIm, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
                </Canvas.Background>
            </Canvas>
        </ItemsControl>

Wischiwaschi ChangeVlaue Event zum testen ( hat auch nix mit MVVM zu tun, ist im MainWindow. Wichtig ist nur die letzte Zeile)

  public void sliderChangeValue(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
      Collections col = new Collections();
      ObservableCollection<BitmapImage> images = new ObservableCollection<BitmapImage>();
      Mittelebene mit = new Mittelebene();
      images = col.LoadFieldMap();
      BitmapImage bild = new BitmapImage();
       
      mit.BitIm = images[0];    
    }

Meine Idee war, der Slider setzt die BitmapImage BitIM Property beim sliden auf das erste Bild aus einer Imageliste ( zu Testzwecken ). Das Canvas merkt dass die ImageSource geändert wurde und setzt das Bild, dass ich der Property vom Slider aus zugewiesen habe. Aber es tut sich nix.....

Ich hatte auch versucht mit dem Elementnamen Verweise zu erstellen. Rein vom optischen sah es schlüssig aus :) Aber ätsch..

In meinen Augen ist an der obigen Verkettung nix falsches.

Ich hatte natürlich intensiv gegoogelt. Die meisten hatten für solche Späßchen Listboxen genommen und Grids. Aber das muss doch mit einem Canvas auch klappen.

Ich verstehe auch nicht, warum ich im Code behind eines Canvas über die Background Eigenschaft nur die Farbe ändern kann über ein SolidColorBrush.

Mache ich

       <Canvas>
                <Canvas.Background>
                    <ImageBrush ImageSource="{Binding BitIm, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
                </Canvas.Background>
            </Canvas>

will er dann auf einmal ein BitmapImage haben. Ich kann zwar ein Bild auch umwandeln, aber dann wird nix angezeigt. Nur ein BitmapImage wird angezeigt. Esseidenn ich nutze diese URI Sache.

Aber aktuell ist mir nur wichtig, warum die oben genannten Codezeilen nicht das tun, was sie sollen.

...zur Frage

CSS: Wie kann ich die Unterlinie des Texts wegbekommen?

Hallo. Irgendwie geht die text-decoration bei mir nicht weg. Bitte helft mir.

HTML:

 <button class="cn"><a href="#">create</a></button>

CSS:

.cn {
  text-decoration: none;
  width: 160px;
  height: 40px;
  background: #23002f;
  border: none;
  margin-bottom: 10px;
  margin-left: 20px;
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: .4s ease;
  margin-left: 350px;
  margin-top: 5px;
}

...zur Frage

XAML Binding Fehler?

Hallo,

Ich habe ein .NET 6 WPF Projekt bei dem bei einem Binding in XAML ein seltsamer Fehler auftritt:

XAML Code:

<Page x:Class="Calculator.Views.Pages.CalcPage"
      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:ViewModel="clr-namespace:Calculator.ViewModels.Pages"
      mc:Ignorable="d" 
      Height="106.642857142857" Width="217.785714285714">
    <Page.DataContext>
        <ViewModel:CalcPageViewModel/>
    </Page.DataContext>
    <Grid>
        <ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Disabled">
            <ListView ItemsSource="{Binding Equations}" ItemTemplate="{StaticResource ResourceKey=EquationModelTemplate}" Background="Transparent"/>
        </ScrollViewer>
    </Grid>
</Page>

Fehler:

Die Eigenschaft im Datacontext existiert definitiv da diese mir wenn ich die XAML erstelle sogar vorgeschlagen wird und vom Typ müsste das auch passen da die Eigenschaft vom Typ

System.Collections.ObjectModel.ObservableCollection<EquationModel>

ist. Danke schon mal im voraus für Vorschläge.

...zur Frage

Abstand nach oben entfernen <CSS>?

Hallo,

ich möchte den Abstand oben entfernen. Es funktioniert einfach nicht, egal was ich mache.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
    <H1>Willkommen auf meiner Webseite</H1>
</div>
    <script>
        function myFunction() {
           var element = document.body;
           element.classList.toggle("dark-mode");
        }
        </script>
        <button onclick="myFunction()">Toggle dark mode</button>
</body>
</html>

CSS:

body {
  padding: 0%;
  margin: 0%;
  background-color: white;
  color: black;
  font-size: 25px;
  width: 100%;
  height: 100%;
  
}
.dark-mode {
  background-color: black;
  color: white;
}
.box{
  justify-content: center;
  padding: 0%;
  margin: 0%;
  padding-top: 0%;
  margin-top: 0%;
  background-repeat: no-repeat;
  width: 100%;
  height: 6cm;
  background-image: url(img/web-1012467_1920\ \(1\).jpg);
}

Das wäre der Code, ich hoffe irgendwer kann mir helfen.

So sieht es aus:

Danke im voraus.

...zur Frage

HTML Navigation Bar Text Farbe ändern?

hey leude

Ich habe meine eigene Website gemacht, jetzt hab ich ein Problem ich möchte die Navigation bar den text dort in schwarz färben... habe schon bei css im header, nav, nav li probiert

CSS

.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

#wrapper {
    width: 960px;
    margin: center;
    font-family: arial, sans-serif
}
    
}

body {
    background-color: #8db6cd;
    
}

header {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 125px;
    text-align: center;
    text-color: black;
}

nav {
    text-align: center;
     text-color: black;
    
}

nav li {
    display: inline;
    margin-right: 40px;
    text-color: black;
}

a {
    color: #777;
    text-decoration: none;
    font-family: arial, sans-serif
}



section {
    width: 620px;
    height: 530px;
    float: left;
    background: lightgray;
    border: 1px solid #000000;
}


aside {
    width: 310px;
    height: 550px;
    float: right;
    background: darkorange;
    border: 1px solid #000000;
}

...zur Frage

C#: Wie kann ich ein limitiertes Fenster mit Sternen an den Seiten versehen?

Meine Aufgabe ist es, bei einem limitierten Fenster der Höhe 20 und Breite 20 mit Hilfe einer geeigneten Schleife einen Rahmen aus Sternen in die äußeren sichtbaren Felder der Konsole zu schreiben.

Versucht habe ich bereits jeweils oben und unten die Sterne zu programmieren. Funktionieren tut jedoch nur, dass der Cursor die Position ändert.

Hier ist der Code:

int width = 20;
int height = 20;
int left = 0;
int top = 0;
int bottom = 20;
int y = 0;

Console.SetWindowSize(width, height);
Console.ReadLine();
Console.SetCursorPosition(left, top);

for (y = 0; y < height; y++)
{
  Console.Write("*");
}

for (int x = 0; x < width; x++)
{
  Console.Write(" ");
}

Console.SetCursorPosition(left, bottom);

for (int yy = 0; yy > height; yy++)
{
  Console.Write("*");
}

for (int xx = 0; xx > width; xx++)
{
  Console.Write(" ");
}

Console.ReadLine();
Console.Write(" ");

...zur Frage

Wie kann ich das Rutschen des DIV-Containers verhindern?

Hallo, wie auf dem Foto (schlecht, rechts unten) zu erkennen möchte ich 3 DIV-Container nebeneinander platzieren.Dazu habe ich alle drei in ein großen Container gesteckt. Jedoch "rutscht" das rechte DIV immer nach unten ohne dass ich es möchte oder weiß wieso es das tut...Ich hoffe es kann mir hier geholfen werden!

CSS:

#body {
    background-color: aqua;
    width: 100%;
    height: 100%;
}


#mitte {
    height: inherit;
    max-width: 60%;
    background-color: aliceblue;
}


#links {
    width: 15%;
    height: inherit;
    float: left;
    background-color: brown;
}


#rechts {
    width: 15%;
    height: inherit;
    float: right;
    background-color: blueviolet;
}

Da HTML hier Probleme mit den < und > hat, davon ein Bild im Anhang...

Danke im voraus, Thomas

...zur Frage

Wie kann man in HTML einen Wrapper erstellen?

Das ist meine Menüleiste:

* {
  padding: 0px;
  margin: 0px;
}

#menu {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 40px;
  width:100% - 36px;
  background: #2d2d2d;
  padding-top: 2px;
  padding-left: 36px;
}

#menu ul li {
  list-style: none;
  color: #bbbbbb;
  font-size: 10pt;
  font-family: Arial;
  line-height: 27px;
  padding: 0 8px;
  display: inline;
  font-weight: bold;
}

#menu ul li:hover {
  color: #fff;
}

Darunter soll der Wrapper kommen.

...zur Frage

WetterApp mit HTML, Css und C# über Blazor Server App?

Hallo undzwar bin ich neu in C# und möchte über die Blazor Server App eine Wetter-App programmieren, allerdings fehlt mir dazu noch der Code, da ich nicht weiß wie ich anfangen soll. Ich möchte dass mein "SearchIcon" welcher in HTML hinterlegt ist als suchbutton fungiert, damit ich die Städte suchen kann und über API möchte ich, dass mir dann die jeweiligen Temperaturen angegeben werden. Kann mir wer helfen und gegebenenfalls einen Code dafür geben.

Hier mein HTML code:

</div>

</div>

<div>

</div>

</div>

<img src="/images/image1.png" width="75" height="75" class="imageline "

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -5px;"

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 22px; margin-right: -5px;"

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -14px;"

</div>

<div>

<p style="color:black;"class="line0 title margin-left ">Monday</p>

<p style="color:black;"class="line0 title margin-left ">Tuesday</p>

<p style="color:black;"class="line0 title margin-left ">Wednesday</p>

<p style="color:black;"class="line0 title margin-left ">Thursday</p>

<p style="color: black;"class="line0 title margin-left ">Friday</p>

</div>

<div>

<p class="speed">Humidity</p>

</div>

<div>

<p class="speed">Wind Speed</p>

</div>

</body>

hier mein Css code:

.backgroundimage {

background-image: url('../images/sun_background.png');

background-attachment: fixed;

background-repeat: no-repeat;

background-size: cover;

}

.cloud-background {

background-image: url('../images/cloud.png');

/* Füge hier die gewünschten Hintergrundbilderigenschaften hinzu */

}

.card {

width: 90%;

max-width: 470px;

color: #fff;

margin: 10px auto 0;

border-radius: 20px;

}

.search{

width: 100%;

display: flex;

align-items: center;

justify-content: space-between;

}

.search input{

border: 0;

outline: 0;

background: #ebfffc;

color: #555;

padding: 10px 25px;

height: 60px;

border-radius: 30px;

flex: 1;

margin-right: 16px;

font-size: 18px;

}

.search button{

border: 0;

outline: 0;

background: #ebfffc;

border-radius: 60%;

width: 60px;

height: 60px;

cursor: pointer;

}

.weather-icon{

margin-bottom: -30px;

}

.weather h1 {

font-size: 80px;

font-weight: 500;

color: floralwhite;

}

.weather h2 {

font-size: 40px;

font-weight: 400;

margin-top: -10px;

color: floralwhite;

}

.details {

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 20px;

margin-top: 50px;

}

.col {

display: flex;

align-items: center;

text-align: left;

margin-top: 150px;

}

.col img {

width: 20px;

margin-right: 20px;

margin-bottom: 70px

}

.humidity, .wind{

font-size: 28px;

margin-top: -6px;

color: floralwhite;

}

.speed{

font-weight: bold;

}

.temp {

margin-bottom: 20px;

display: flex;

justify-content: center;

}

.search button img{

width: 55%;

}

.center {

display: flex;

justify-content: center;

}

.top-left{

display: flex;

justify-content:left

}

.top-left

{

margin-left: 10px;

}

.margin-top{

margin-top: 20px;

}

.hr1 {

width: 390px;

height: 2px;

color: black;

}

.line{

margin-bottom: -100px;

margin-top: 10px;

}

.line1{

margin-top: 30px;

margin-bottom: -20px;

}

.line0{

margin-top: 70px;

margin-bottom: -90px;

font-size: 14px;

font-weight: bold;

color: black;

}

.imageline {

margin-top: 5px;

margin-bottom: -90px;

}

.imagesMain {

padding: 0;

margin-left: auto;

margin-right: auto;

margin-top: 20px;

text-align: center;

}

.imagesMain img {

height: 400px;

width: 300px;

vertical-align: middle;

}

.title {

display: inline-block;

color: lightgray;

}

.margin-left{

margin-left: 14px;

}

...zur Frage

WPF Form Combobox Ohne Dropdown Button?

Hallo,

ich möchte, dass meine ComboBox in meinem WPF-Form keinen Dropdown-Button hat. Das funktioniert, wie hier gezeigt https://stackoverflow.com/questions/1373330/wpf-combobox-without-drop-down-button bei einer "Default" ComboBox problemlos. Ich habe meine allerdings ein wenig angepasst, um die Hintergrundfarbe zu ändern und nach dieser Änderung, erscheint der Dropdown Button wieder.

Weiß jemand, wie man den wieder weg bekommt?

Hier mein XML für die ComboBox:

<ComboBox x:Name="combobox" Width="55" Height="22" Background="#FF232323" Style="{StaticResource {x:Static ToolBar.ComboBoxStyleKey}}" Foreground="White" BorderBrush="{x:Null}">
    <ComboBoxItem IsSelected="True" Content="Item1"/>
</ComboBox>

Danke für alle Anworten im Voraus

...zur Frage

Hilfe für c# code mit HTML &CSS in Blazor?

Hallo, ich möchte eine WetterApp programmieren mit Blazor und sitze jetzt schon 4 Tage an dem Problem mit C#, da ich keine Ahnung habe wo ich anfangen soll und generell neu bin und nicht ganz vertraut bin. Ich habe die WetterApp mit JavaScript programmiert, allerdings soll ich C# verwenden und nicht JavaScript deshalb brauch ich eure Hilfe! Kann mir wer dabei helfen einen C# Code zu schreiben, welcher dasselbe macht wie mein javaScript-Code:

1. Ich möchte das mein "SeachrIcon-Button" aus einem HTML-Code als Suchbutton fungieren kann, womit ich die einzelnen Städte suchen kann, damit mir dabei dann die Wetterdaten angezeigt werden.

Ich möchte, dass dann die Bilder der zu den jeweiligen Wetter vorkommnissen angepasst werden, also die Wetter Daten sollen in der Console angezeigt werden aber nicht auf dem Display

Hier mein Html Code:

<body class="backgroundimage">


  <div class="card">
      <div class="search">
          <button><img src="/images/SuchIcon.png"></button>


              <input type="text" placeholder="Search" spellcheck="false" />
        
      
      </div>
  </div>
    
     
  <div class="weather"> 
      <div class="center margin-top">
      <img src="images/image1.png" width="200" height="200" style="opacity: 1" class="weather-icon" />
      </div>


     <div>
          <h1 class="temp">22°c</h1>
     </div>
      
      
      <div class="center">
          <h2 class="city center margin-top">New York</h2>
      </div>


          <hr class="hr1 line1" />

          <div id="imagesMain">
              <img src="/images/image1.png" width="75" height="75" class="imageline " />
              <img src="/images/image1.png" width="75" height="75" class="imageline " />
              <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -5px;" />
              <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 12px; margin-right: -10px;" />
              <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 2px; margin-right: -14px;"/>


          </div>

          <div>
           
              <p style="color:black;" class="line0 title margin-left ">Monday</p>
              <p style="color:black;" class="line0 title margin-left ">Tuesday</p>
              <p style="color:black;" class="line0 title margin-left ">Wednesday</p>
              <p style="color:black;" class="line0 title margin-left ">Thursday</p>
              <p style="color: black;" class="line0 title margin-left ">Friday</p>
             
           
          </div>

          <hr class="hr1 line" />

      <div class ="details">
          <div class="col">
              <img src="images/humidity.png"/>
              <div>
                  <p class="speed">Humidity</p>
                  <p class="humidity">50%</p>
                  
              </div>
          </div>
          <div class="col">
              <img src="images/wind.png" />
              <div>
                  <p class="speed">Wind Speed</p>
                  <p class="wind">15 km/h </p>
                 
              </div>

          </div>

      </div>
  </div>
  
   </body>

Im unteren Kommentar werd ich die restlichen Codes posten

...zur Frage

Wie kann ich ein HTML Bild mittig ausrichten ohne Größenänderung?

ich habe es folgendermaßen probiert:

<style type="text/css">
<!--
img.center {
position: absolute;
left: 50%;
width: 400px;
margin-left: -200px; /* negative Hälfte von width:400px */
top: 50%;
height: 150px;
margin-top: -75px; /* negative Hälfte von height:150px */
}
-->
</style>
 
</head>
<body>
 
     <img class="img.center" src="/img/meinbild.jpg">
 
</body>
</html>

jedoch wird das bild damit leider gestaucht. das bild soll aber immer im mittelpunkt des bildes zentriert werden und seine länge-breite-proportion behalten - also keine eierköpfe bekommen. die größe des bildes soll mit der größe des fensters mitwachsen...

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen